Log in

View Full Version : Extra top padding in a container when using HTML5 doctype


Rain Lover
03-24-2014, 05:55 PM
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 (http://jsfiddle.net/Mori/gaab7/)

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?
Beverleyh
03-25-2014, 09:24 AM
If you are referring to the placement of the text inside the tan bar, the spacing above and below is equal on the uppercase letter. I believe that this is just standard alignment of uppercase in relation to lowercase. It does similar with the 4.01 Transitional doctype too, minus 1px above and below for how that doctype renders (not a bug - just differences in the way doctypes render in different browsers).

I notice that you are using vertical-align: middle; on inline elements within the div. As I understand, this will align the middle of the child image with the middle of child lowercase letters, rather than affecting alignment of elements overall within the parent container, so again, uppercase and lowercase lettering will seemingly create visual discrepancies in such a narrow bar, but I think that's more to do with the way the human eye sees the "weight" of the surrounding space. More info on vertical-align: http://css-tricks.com/what-is-vertical-align/

If you are trying to vertically align elements within the tan bar, have a look at these methods: http://www.vanseodesign.com/css/vertical-centering/

If this isn't what you are meaning or trying to do, please clarify your question and requirements.
Rain Lover
03-25-2014, 10:25 AM
It does similar with the 4.01 Transitional doctype too, minus 1px above and below for how that doctype renders (not a bug - just differences in the way doctypes render in different browsers).

That's the problem: why should there be such a difference between different DOCTYPEs when it comes to a container height and what exactly is this difference? The content is the same, so the container height should be the same. :confused:
Beverleyh
03-25-2014, 11:48 AM
As I understand, the 'Transitional' doctypes (or no doctype at all) instruct some browsers to render in quirks mode - a loose interpretation of W3C specification which emulates legacy behaviors and bugs of old, version 4 browsers.

And 'Strict' or 'XHTML' doctypes instruct browsers to render in standards (or "almost standards") mode - a strict rendering mode that follows W3C specifications for HTML/CSS, etc, as closely as possible. Therefor switching between doctypes results in rendering differences between different browsers and different doctypes.

I believe that the different "padding" you're referring to is actually a margin and comes down to the way an <img> tag is rendered in Strict mode (the HTML5 doctype in your example triggers Strict mode, compared to the Transitional 4.01 one). Inline-elements have space reserved for the hanging letters like "j" or "y", which is fine for <span> tags and such, but <img> doesn't have hanging letters, yet in Strict mode, space is still reserved for them, which leaves an unused bottom-margin. So its a bottom-margin on the img tag that you're seeing, rather than a padding from the parent div, except it wont look like a bottom-margin due to your use of vertical-align: middle; on the <span> and <img> - take that off and the reserved bottom-margin is visible (in Strict mode).

But to complicate matters, some browsers render in "almost strict" mode, which changes the way that <img> tags are rendered - namely, like block-level elements instead of inline-elements, hence the removal of the bottom-margin, because block-level elements don't have space reserved for hanging letters ("j", "y", etc).

To learn more about doctypes and rendering modes in different browsers, see this article: https://hsivonen.fi/doctype/ There's a nice table that shows which doctype induces which rendering mode, and in which browsers, which is quite interesting because you'll see where Strict and "almost strict" kick in to action.
Rain Lover
03-25-2014, 06:24 PM
Thanks for the answer and explanations! :)