1

There is extra top padding in the following div:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Extra Top Padding</title>
    <style>
        div {
            background: tan;
        }
        div * {
            vertical-align: middle;
        }
        span {
            font-size: 16px;
        }
    </style>
</head>

<body>
    <div id="container">
        <img src="https://ssl.gstatic.com/images/icons/gplus-16.png"><span>Some text</span>
    </div>
    <p id="indicator"></p>
    <script>
        document.getElementById('indicator').textContent = document.getElementById('container').clientHeight;
    </script>
</body>

</html>


DEMO

It shows correctly if you use HTML 4.01 Transitional doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


Is it a bug in HTML5?

7
  • Looks weird indeed. Meanwhile as a workaround you can implicitly specify DIV's height: jsfiddle.net/9qsEu Mar 24, 2014 at 17:44
  • Thanks for the answer, but it's not a good solution as the div height should be always equal to its content height. Besides, in your demo the content isn't aligned in the middle of the container.
    – Mori
    Mar 24, 2014 at 17:48
  • An odd phenomenon indeed. It also appears without an image. It’s not padding (browser developer tools show zero padding, as expected); somehow the line box calculation is different when <doctype html> is specified. Mar 24, 2014 at 18:32
  • Yes, you're right. By padding I mean some extra space inside the container.
    – Mori
    Mar 24, 2014 at 18:33
  • So what # are you expecting to see shown in #indicator?
    – Charlie74
    Mar 24, 2014 at 18:38

3 Answers 3

2

tl;dr

It's not bug. It follows as a consequence of using almost standards mode or standards mode for your document. And it's not padding, it's line-height space.


Personally, I wouldn't be satisfied with the above as an explanation. But to fully explain requires substantial detail. So here goes:

Calculations are for Times New Roman typeface. Other typefaces may give different values though the principles remain the same.

The height difference is the same with or without the img element so let's discard that.

When you use the HTML5 doctype (or the HTML 4.01 Strict doctype) you get Standards mode. When you use the HTML 4.01 Transitional doctype you get Almost Standards mode. The difference between the two modes is primarily about which inline boxes affect the line height. In particular, the strut has no effect in Almost Standards mode.

So in Almost Standards mode, the only inline box is the text. The total height of the div is simply the line height of that text. Which is 16px * 1.25 (the div's line-height setting) = 20px.

Standards mode is more complicated. Now we have both the text and the strut. the strut is aligned to the baseline. The default line height of 1.25 gives us 2px upper half leading + 13px ascender above the baseline and 3px descender + 2px lower half leading. Total 20px.

The text is vertical-align:middle. The CSS 2.1 spec for that says

Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.

The baseline of the parent box is the baseline of the strut which we know from the above is 5px above the bottom (before adding the text).

The x height for the typeface at a font-size of 16px is around 7px. Halve that and truncate to a whole number gives 3px. Add that to the 5px and we get an alignment line for the text of 8px above the bottom.

The vertical midpoint of the box has 10px above the alignment line and 10px below the alignment line.

The line height must be large enough to contain all its inline boxes, so that means that it must be the maximum of the boxes above the alignment line + the maximum of the boxes below the alignment line. That's max(12px[strut], 10px[text]) above the line and max(8px[strut], 10px[text]) below the line.

Which equals (12px + 10px) or 22px.

3
  • If I could up vote more than once... I would. Great answer.
    – Charlie74
    Mar 25, 2014 at 22:48
  • Many thanks for the answer! To get the same height in different DOCTYPEs, can I take the approach I mentioned above:demo? Or even this one:demo? Ane one more question please: why is this number different in different browsers?
    – Mori
    Mar 26, 2014 at 2:55
  • 1
    Yes, you can take either approach. Both your demos have the effect of reducing the height of the strut so that it fits entirely within the 20px height of the text regardless of the alignment. As for different browsers, each browser has it's own rendering engine for fonts. They probably use slightly different logic for resolving the sub-pixel values into the whole values they need.
    – Alohci
    Mar 26, 2014 at 19:23
0

No, it's not a bug, this is so-called browser default stylesheet, if you use a reset library, you will get rid of it, check this modified fiddle: http://jsfiddle.net/nightire/gaab7/2/

Compare with these two pictures:

enter image description here

and

enter image description here

So tell me @jukkaK.Korpela, what is your same code & same phenomenon?

I will paste another picture shows how to solve your issue without any 3rd party reset library. It seems like @jukkaK.Korpela 's browser didn't render the correct result, so plz, check this and try to find another computer to verify it.

enter image description here

14
  • 1
    The jsfiddle contains the same code and same phenomenon as the question. If you say the problem is with default style sheet, you should say which particular item there it would be. Mar 24, 2014 at 18:05
  • @JukkaK.Korpela in the screenshot, you can see the difference is checking the Normalized CSS button.
    – Charlie74
    Mar 24, 2014 at 18:12
  • 1
    The jsfiddle address you posted shows no difference. Now you are saying that settings in jsfiddle have an impact. Well, they don’t, on my Firefox for example. Even if they did, that would not really answer the question. Mar 24, 2014 at 18:16
  • 1
    @JukkaK.Korpela That setting just apply normalized css on this document. If you can't see the difference, maybe you should check your firefox. The browser default style sheet is the common setting for all major browser, arguing with this is ridiculous.
    – nightire
    Mar 24, 2014 at 18:20
  • 1
    Shows 22 to me, with extra space on top of the problem element, as in the original. Do we live in parallel universes? BTW, the CSS code is not valid (spurious “}” at the end), and I wonder how setting margin or padding on body or p could affect the issue, which is about something inside a div element. Mar 24, 2014 at 18:40
-1

This is not really a bug, but a user agent / browser default styling. Every browser (or browser family actually) has different defaults. I would recommend to use normalize.css for that kind of issue

normalize.css: http://necolas.github.io/normalize.css/

1
  • @JukkaK.Korpela please read my post carefully before blindly down voting without any reason. Every user agent has another default styling (every rendering engine). That is the anwer. The solution: normalize or reset css.
    – Paranoia
    Mar 24, 2014 at 18:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.