I wanted to make the line tighter in an ordered list.
So I just style it – and it is fine.
|This style has always worked well for me.
Until I add a nested list, and it is not working well.
For some reason when I add these two stylings the nested ordered list goes to the bottom of the list.
It is no longer nested, nested item is a bottom of list in Edge and Chrome
li {
height: 0px;
width: 0px;
}<pre>
<ol>
<li> item one </li>
<li> item two
<ol>
<li> nested item one</li>
</ol>
</li>
<li> item three </li>
<li> item four </li>
<li> item five </li>
</ol>When I take this li styling class away from <style> the list is nested again.
2
I think you want the CSS property line-height instead. As IMSoP says, you don’t want height or width here.
Try
li {
line-height: 1;
/* try also .8 */
}<ol>
<li> item one </li>
<li> item two
<ol>
<li> nested item one</li>
</ol>
</li>
<li> item three </li>
<li> itme four </li>
<li> item five </li>
</ol> Aimee Pederson is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1
To achieve tighter spacing without collapsing the list items, you can use margins and padding instead of setting the height and width to zero. Hope this helps
/* Remove default margin and padding */
ol, ul {
margin: 0;
padding: 0;
}
/* Style list items for tighter spacing */
li {
margin-bottom: 4px;
}
/* Additional styling for nested lists Adjust as needed */
ol li ol {
margin-top: 4px;
margin-left: 20px;
}