How can I reduce line height in nested lists? [duplicate]

Question

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.

height and width don't represent the spacing of anything, they represent the actual height and width; so you've said "each item should take up no space at all". That's probably not what you wanted. — IMSoP
– IMSoP, Commented Jun 7, 2024 at 16:11
Why is your demo preformatted? I suggest that you remove that tag and use the Tidy button to format your code. Also, revise your title to ask a clear, specific question. See How to Ask. — isherwood
– isherwood, Commented Jun 7, 2024 at 16:40

freshflayedwaffle · Accepted Answer · 2024-06-07 16:26:35Z

0

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>

edited Jun 7, 2024 at 16:26

answered Jun 7, 2024 at 16:24

freshflayedwaffle

13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Developer · Accepted Answer · 2024-06-07 16:37:09Z

0

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;
}

answered Jun 7, 2024 at 16:37

Developer

26.5k20 gold badges86 silver badges134 bronze badges

Collectives™ on Stack Overflow

How can I reduce line height in nested lists? [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related