CODEWITHSUNDEEP
htmlcsspadding
pingu
pingu

Reputation: 8827

Space around text in header elements

I have been inspecting a header element using firebug, and have noticed that the header container does not hug its contained text, even though I have no padding set.

<h2>test</h2>

http://jsfiddle.net/BTwk6/

The top and bottom spacing is greater than that on the left and right, the result of this is that my h2 does not sit squarely in its containing box.

Is this normal? Is there anyway to have the h2 box hug its text?

Thanks

Upvotes: 0

Views: 727

Answers (4)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

Yes, it is normal, and things are supposed to be that way. If you e.g. set a border on a heading element, you will see that characters in the heading text will normally not touch the border.

There are two reasons to this. First, the height of a font is a design concept and does not (normally) correspond to the height of any letter; there is empty space above even capital letters as well as below the baseline of text. Descenders like that of “j” or “g” may, in some designs, reach the bottom of the font, and diacritic marks like that of “Ê” may reach the top, or even go beyond it.

Second, there is normally some leading above and below a line, typically a total of 15–20% of the font height. The default depends on the font (and on the browser). In practice, this is meant improve readability and to prevent characters from touching characters on the previous or next line.

The leading is indirectly set by setting line-height, since line-height sets the total height that is the sum of font height (font size) and leading. By setting line-height: 1, you set leading to zero; this is called “setting solid” in typography, and it can be suitable for isolated lines, like a one-line heading. But there is still spacing caused by the first reason mentioned, the spacing that has been “built in” into the font. You can even set line-height to a smaller value, like 0.85, making the leading negative. Beware that this may cause vertical truncation of characters if the font used differs from the one you suggest on your page.

Upvotes: 2

Djave
Djave

Reputation: 9329

Try adjusting the line-height property as well, by default different fonts have different spaces above and below them. You may not be able to entirely fix this. For example, the word

Tempura

Is a whole lot taller than the word 

mum

But the word 'mum' will still have to have the same height above and below the line as 'Tempura'.

Upvotes: 2

mimiz
mimiz

Reputation: 2288

Try to reset margin and padding : 

h2{margin:0;padding:0}

replace 0 with your own values ...

mimiz

Upvotes: 0

maksbd19
maksbd19

Reputation: 3830

by default a h2 element has a margin of 19px top an bottom. Try to reset it

Upvotes: 0

Related Questions