CODEWITHSUNDEEP
htmlcss
i am jack's wasted life
i am jack's wasted life

Reputation: 247

Extra space before and after H1 tag

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

Upvotes: 10

Views: 24132

Answers (6)

Max
Max

Reputation: 193

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.

Upvotes: 0

quincy
quincy

Reputation: 11

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.

Upvotes: 1

Sushil Kundu
Sushil Kundu

Reputation: 1

h1.demo {
  padding: 0 !important;
  margin: 0 !important;
  line-height: 40px;
  font-size: 40px;
}
<h1 class="demo">Some Text</h1>

Upvotes: -1

Timur
Timur

Reputation: 383

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

What you can do is just add line-height

Upvotes: 0

Peter Wilson
Peter Wilson

Reputation: 4319

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>

Upvotes: 11

Dmitry Kholoshevsky
Dmitry Kholoshevsky

Reputation: 1

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

Upvotes: 0

Related Questions