Menu
I am having problems with my image spacing when I switched to XHTML Strict DOCTYPE.
The following code - which uses Yahoo's reset stylesheet to kill off all default browser padding - leaves a gap of about 4 pixels between the two images below but ONLY when I use the strict doctype. Why is this?
It is only a problem in Chrome and Firefox. IE doesn't show a single pixel between the two images.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css">
</head>
<body>
<div><img src="http://www.catfacts.org/cat-facts.jpg" border="0"/></div>
<div><img src="http://www.catfacts.org/cat-facts.jpg" border="0"/></div>
</body>
</html>
969
Using Peter's answer as a start the following fixes the problem:
img { vertical-align: bottom }
The reason this works is that the default for vertical-align is baseline, which equates to the part of the text "above the line" where the dangly bits hang down (lower case g, q, etc all hang below this baseline).
So in order to leave room it was leaving 4px of space for these overhangs.
Hope that made sense.
Edit: Visual aid from source site
(source: brightlemon.com)
63
More information about the misterious image gaps can be found here:
https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
