html5 vertical spacing issue with

by

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.

More Related Contents:

  1. Make a div into a link
  2. xHTML/CSS: How to make inner div get 100% width minus another div width
  3. For div to extend full height
  4. Nested rows with bootstrap grid system?
  5. How would I achieve a shadow that won’t show through transparent text?
  6. Fill in text in HTML5
  7. Margin on child element moves parent element
  8. How to place two divs next to each other?
  9. Is it wrong to change a block element to inline with CSS if it contains another block element?
  10. Order columns through Bootstrap4
  11. How do I center align horizontal menu?
  12. HTML 5 strange img always adds 3px margin at bottom [duplicate]
  13. Actual table Vs. Div table
  14. What is the current state of the “scoped” attribute for the style element in HTML5?
  15. Proper way to apply CSS to HTML5 custom elements
  16. CSS Parent/Ancestor Selector [duplicate]
  17. How to position a div in the middle of the screen when the page is bigger than the screen
  18. How to write a caption under an image?
  19. How do I line up 3 divs on the same row?
  20. Stretching tag to fill entire
  21. CSS @font-face not working in ie
  22. CSS: How to align vertically a “label” and “input” inside a “div”?
  23. How to make CSS Grid items take up remaining space?
  24. Div side by side without float
  25. Full background image with fade effect
  26. Is there a way to style HTML5’s range control?
  27. Why shouldn’t I use position:absolute for positioning everything?
  28. print page count with total number of pages using css
  29. Bootstrap Grid System new line does not look nice
  30. Table with table-layout: fixed; and how to make one column wider

Leave a Comment