Welcome to WebmasterWorld Guest from 23.22.46.195

Forum Moderators: not2easy

Extra top padding in a container when using HTML5 doctype

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

5+ Year Member Top Contributors Of The Month



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)

WebmasterWorld Senior Member 10+ Year Member



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)

5+ Year Member Top Contributors Of The Month



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

WebmasterWorld Senior Member 5+ Year Member



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)

WebmasterWorld Senior Member 5+ Year Member



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)

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



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)

5+ Year Member Top Contributors Of The Month



@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! :)
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month