CODEWITHSUNDEEP
css
Clay Nichols
Clay Nichols

Reputation: 12139

How do I have an UL of H1 without vertical space between the LI's?

I"m trying to create a bullet list of h2 items.

    <ul>
   <li><h2 style="line-height:28px;font-size:35px">  Some text here</h2></li>
   <li><h2>  Some more text here and this happens to be very long sometimes so it wraps like this.</h2></li>
</ul>

But if I reduce the line height enough to avoid a big space between bullets then the wrapped bullet line has too little space.

It seems that there is extra vertical space (maybe an extra CR?) after an h2.

Upvotes: 0

Views: 194

Answers (3)

gknicker
gknicker

Reputation: 5569

Put this in the <head> section of your html, or add this h2 style to your separate cascading style sheet file if you have one:

<style> h2 { margin: 0; padding: 0; } </style>

Upvotes: 1

Leo
Leo

Reputation: 14820

By default, browsers add padding and/or margins to all heading tags. If you remove that margin you should be good to go

h2{margin:0;padding:0}
<ul>
   <li><h2 style="line-height:28px;font-size:35px">  Some text here</h2></li>
   <li><h2>  Some more text here and this happens to be very long sometimes so it wraps like this.</h2></li>
</ul>

Upvotes: 1

Ian Hazzard
Ian Hazzard

Reputation: 7771

It's because the <h2> element has a default display setting of block. This automatically makes it take up the whole line, pushing everything beneath it. Kind of like adding the <br/> element after something. Change it to display: inline; to fix the problem.

NOTE: You then won't need the line-height property.

<ul>
   <li><h2 style="font-size:35px;display:inline;">  Some text here</h2></li>
   <li><h2>  Some more text here and this happens to be very long sometimes so it wraps like this.</h2></li>
</ul>

You may also need to change the margin and padding properties, if this doesn't take away enough space. <h2> elements have some predefined settings on those properties as well.

<ul>
   <li><h2 style="font-size:35px;display:inline;padding:0;margin:0;">  Some text here</h2></li>
   <li><h2>  Some more text here and this happens to be very long sometimes so it wraps like this.</h2></li>
</ul>

Upvotes: 0

Related Questions