Reputation: 51
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
Reputation: 1213
you can use margin, due to that margin is to the outer space of an element
li{
margin: -1px 0;
}
Upvotes: 3