H1 标签前后的额外空间

Question

Even after reseting margin and padding the h1 tag still has mysterious unwanted gaps before and after its content

see code pen

Adding

 line-height:0.7em;

rule approximately resolve the problem, however

1. it looks unclean
2. there are still few unwanted pixels
3. not sure that this will not cause issues with different font size or units.

Is there a clean and universal solution, maybe using sass/less mixin with math operations?

HTML:

<h1>Some text</h1> 

CSS

* { margin:0;padding:0; }
h1 { font-size:25em; } 

Answer 1

the h1 tag by default has line-heigth property you can adjust it like

h1 {
font-size: 25em;
line-height: 0.7em;
} 

updated example

 * { margin:0; padding:0; } h1 { font-size:25em; line-height:0.7em; }

 <h1>Some text</h1> <p>lorem ispum</p>

Answer 2

Since the h1 is a block level element, it has whitespace on the sides by default. You can add display: inline to get rid of it, but it's positioning will be affected.

Answer 3

Be sure, that your css rules of margin: 0; padding: 0; is on. Make it !important just for test. line-height: 1; should fix the problem (or line-height: 0). You can set height for h1 element

Answer 4

h1 {
      font-size:25em;
      background-color:pink;
      line-height:0.8;
    }

What you can do is just add line-height

Answer 5

 h1.demo { padding: 0 !important; margin: 0 !important; line-height: 40px; font-size: 40px; }

 <h1 class="demo">Some Text</h1>

Answer 6

In my case, the solution I had found was that, I had set a global line-height value which was messing with everything else. And even apart from that, I realized that just like margin and padding, there's even default line-height values to elements.

So one thing you could do is, set their "line-height: normal" or "line-height: initial" to individual elements or even just globally (latter might yield better results).

If that doesn't work, just manually enter any line-height values that seem to work for you although that's not the most optimal solution. It generally means somewhere you have a line-height setting that's overriding the same for other elements or is just messing with the spacing of other nearby elements, that share a border with it.