CODEWITHSUNDEEP
htmlcss
Putte
Putte

Reputation: 51

Reduce line spacing between <li> elements in css

I need to reduce the vertical spacing between the li elements, but not within li elements. I tried using 'line-height: 75%' in the css but whilst it worked, it also reduced the line height within the li such that the two lines of text within the bullet point were overlapping.

.mb2 {
  margin-bottom: 28px;
  margin-bottom: 1.8rem;
}

.middle {
  text-align: center
}

.link1 {
  color: black;
  text-decoration: none;
}

#product ul {
  text-align: left;
  font-size: 12px;
  font-size: 0.8rem;
  position: relative;
  left: -10px;
}

#product li {
  position: relative;
  left: -5px;
}
<div id="product">
  <table class="middle mb2">
    <tr>
      <td width="289">
        <a class="link1" HREF="meters.html">
          <img src="images/image1.jpg">
        </a>
        <ul>
          <li>Bullet point 1</li>
          <li>Bullet point 2</li>
          <li>Bullet point 3</li>
        </ul>
      </td>
      <td width="72"></td>
      <td width="289">
        <a href="accessories.html">
          <img src="images/image2.jpg">
        </a>
        <ul>
          <li>Accessories for various product types, spans 2 lines</li>
          <li>More description of accessory types, this also spans more than 1 line with multiple words and so forth</li>
        </ul>
      </td>
    </tr>
  </table>
</div>

Upvotes: 3

Views: 1809

Answers (1)

TalOrlanczyk
TalOrlanczyk

Reputation: 1213

you can use margin, due to that margin is to the outer space of an element

li{
  margin: -1px 0;
}

Upvotes: 3

Related Questions