html5 vertical spacing issue with

Question

I am trying to create a layout where the vertical spacing between divs is pixel perfect. So far I've ruled out almost all the big grid systems (960.gs, Blueprint), because they have no solution at all for the vertical spacings. With them, the only way to set vertical spacing between divs is to use body { line-height } attribute and manipulate the div spacing using that. I wouldn't call that a solution, as it ruins your template, depends on font-family, and doesn't let you use different spacings for different divs.

The only grid system I found which has proper support for vertical spacing is Golden Grid, which doesn't use body { line-height }, but has it's own .clear { height: 5px } for vertical spacing.

My problem is that no matter how I try, I couldn't make spacing work in HTML5. I am talking about vertically arranged images without gap between them. In XHTML transitional mode, everything works perfecly, the images align perfectly, but when in HTML5 mode, they have a vertical gap between them. The gap is 2px in Chrome and 2-3 px in Firefox, alternating between lines. I think it's the case with every grid system when used in HTML5 mode. I don't know what's the best way to write this code in plain HTML5, so I just tried grid systems. The vertical gap is present in 960.gs, Blueprint too.

A solution I found out might be to set body { line-height: 0 } and define line-height in every single typographic tag. But I don't understand why such a bad hack would be required for such a simple case: vertically arranged images. Why are browsers different in HTML5 mode than in XHTML Transitional mode?

Here, I have the same page, nothing changed, just the doctype. The XHTML one is pixel perfect in every browser, the HTML5 one has the gap and is different from browser to browser.

What is the best way to make the HTML5 example work like the XHTML transitional one?

UPDATE: thirtydot answered the problem, if I include img { display: block; } the HTML5 version behaves exactly the same as the XHTML Transitional. Thank you thirtydot!

But before closing this thread, can someone explain to me why is it that:

• Why do all browsers behave differently in HTML5 mode and all have different vertical gaps between img elements, when not specified as display: block. Have a look in a browser comparing site for the html5 link above, it will be different from browser to browser. They have gaps between 2 to 4 px.
• Why does XHTML Transitional not need this hack
• Why does XHTML Strict produce a vertical gap too
• Is it safe to use img { display: block; } in a reset.css sheet?

Answer 1

Why do all browsers behave differently in HTML5 mode and all have different vertical gaps between img elements, when not specified as display: block?

First of all, browsers do not have a "HTML5 mode". What they have are three modes "Quirks", "Limited Quirks" (aka Almost Standards) and "Standards" mode. There is only one difference between "Limited Quirks" and "Standards" modes and that relates to the way in which a line-height and baseline is established for the line box of which the <img> sits. In "Limited Quirks" mode, if there is no rendered text content on the line, then no baseline is established and the <img> sits on the bottom of the line box.

In "Standards" mode, the line box always contains the space for the descenders of characters like g, p and y below the baseline, even if there are no real characters in that line box.The gap you see is the distance between the baseline and the bottom of the line box which is the space for those descenders. For a thorough description, see http://msdn.microsoft.com/en-us/library/ff405794%28v=vs.85%29

The remedy, then, is either to stop <img> being treated as an inline element { display:block; } or to override the vertical alignment of the <img> { vertical-align:bottom; }. Either will work.

Why does XHTML Transitional not need this hack

Using the XHTML Transitional doctype places the browser into "Limited Quirks" mode. Had you used XHTML Strict, or a full HTML4 Strict doctype, you would have seen the same gaps as you see with the HTML5 doctype as each of these places the browser in "Standards" mode.

Why does XHTML Strict produce a vertical gap too

See above.

Is it safe to use img { display: block; } in a reset.css sheet?

Of course, but there will probably be times when you'll want <img> to be treated as an inline element. In those cases, you'll need to add CSS in the appropriate places to achieve that.

Answer 2

I feel like this can't be the answer you're looking for. It's too short:

Add to the CSS of your HTML5 page: img { display: block }.

Testing in Firefox and Chrome, doing that gets pixel perfect identical rendering between your two pages.

Answer 3

Try this code:

<html>
<head>
<style>
div, span { border:1px dotted; height:100px; width:100px; }
</style>
</head>
<body>
  <span>100px</span>
  <div>100px</div>
</body>
</html>

When you consider that <img> is an inline element like <span>...I think most of your questions are answered.

Without the width/height attributes, your dependent on each browsers rendering engine to being identical (they're not). So pixel perfect won't work until you tell the browsers how many pixels to use.

Answer 4

The vertical-align: baseline is causing the gap at the bottom of your images.

In Strict doctypes, images are inline elements and behave like text. Aligning inline elements at the baseline causes them to leave room for text descenders even if there is not any text.

Adding img { vertical-align: bottom } to your reset stylesheet will fix the problem.