Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

html5 vertical spacing issue with <img>

Tags:

html

css

xhtml

grid

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?
like image 366
hyperknot Avatar asked Feb 05 '11 02:02

hyperknot


People also ask

How do I put vertical space around an image in HTML?

In HTML, you provide this space by using the vspace and hspace attributes within the img element. In CSS, to align an element with no text wrap, apply the text-align property to a block-level element that contains the image.

How do I put vertical space between images in CSS?

You can either use the margin or its shorthand properties to add space between the images. For the horizontal spacing, you can use the margin-left and margin-right. While for the vertical spacing you can use the margin-top and margin-bottom properties.

How do I reduce vertical space in HTML?

HTML allows one to reduce vertical space, using something like p { margin-top: -20px; } or such as shown in number of places on the net. For example how-to-reduce-the-space-between-p-tags.

How do you put a space between two vertical divs?

a (the fixed one) to the top of the page, add top: 0; and if you want it to stay on top of the rest of the content, include z-index: 2; . In order to add spacing between div.


1 Answers

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.

like image 195
Alohci Avatar answered Oct 06 '22 00:10

Alohci