Welcome to WebmasterWorld Guest from 54.167.83.224

Forum Moderators: not2easy

Message Too Old, No Replies

Extra top padding in a container when using HTML5 doctype

     
5:47 pm on Mar 24, 2014 (gmt 0)

Junior Member

5+ Year Member Top Contributors Of The Month

joined:Mar 1, 2010
posts: 194
votes: 0


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: [jsfiddle.net ]

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?
6:24 pm on Mar 24, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2003
posts:904
votes: 5


Annoying as it may be, I expect that in the end it will come down to browsers having different defaults for different <!DOCTYPE>s - especially for the HTML and BODY elements. In any case, the solution is straightforward enough.
6:33 pm on Mar 24, 2014 (gmt 0)

Junior Member

5+ Year Member Top Contributors Of The Month

joined:Mar 1, 2010
posts: 194
votes: 0


I tried * {margin:0; padding:0;} to no avail.
11:24 pm on Mar 24, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:May 23, 2005
posts:742
votes: 0


HTML5 is a specification, not an application, so, no, it's not a bug in HTML5. But no one should be using the transitional doctype for new web pages since 1999 so I don't know why the comparison is being made.

Without checking, I'd bet the difference is caused between the values of textContent and clientHeight.
11:23 am on Mar 25, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:May 23, 2005
posts:742
votes: 0


Forget my last line about textContent. It does change with the doctype so that statement doesn't make sense. I'm not surprised the doctype causes the change but it's been so long since I've had to deal with those issues that I don't remember and it's not worth remembering for the reason I stated, no one should be using a transitional doctype for new web pages.
4:21 pm on Mar 25, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4965
votes: 10


You're seeing the line-height of the <div>. Since you haven't specified a line-height, the browser will default to "normal", and the value of "normal" is browser defined. Many browsers use 1.2 of the font-size. Perhaps "normal" was different in HTML4.01 loose. In any case, if you want/need a fixed line-height, then declare it in your CSS.
2:39 am on Mar 27, 2014 (gmt 0)

Junior Member

5+ Year Member Top Contributors Of The Month

joined:Mar 1, 2010
posts: 194
votes: 0


@Fotiman:

Yes, you're right!
I'd better completely get rid of the container line-height so its height equals the content height:
[jsfiddle.net ]
Now it works on any font & image size.

Thank you very much! :)
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members