Irmen's blog

opeens verticale spacing tussen images in xhtml/html4 strict

Ik heb een paar images die zowel horizontaal als verticaal precies tegen elkaar aan moeten vallen. Als ik mijn pagina in HTML4 transitional maak, dan zag het er uit zoals ik wil hebben: 4 plaatjes, 2x2, zonder ruimte ertussen.

Toen ik er een HTML4 strict, of een XHTML strict pagina van maakte, verscheen er opeens een paar pixels verticale ruimte tussen de plaatjes zodat ze niet meer op elkaar aansloten

Wat blijkt het heeft iets te maken met de verticale alignment van de images, dus als je een stukje css toevoegt die de alignment op bottom zet, dan verdwijnt de tussenruimte weer. Je kunt ook van img weer een block-element maken, in strict mode is het namelijk een inline-element (en dit maakt ruimte voor letters die onder de baseline uitsteken).

img {
   vertical-align: bottom;
}
/* of: */
img { 
   display: block; 
}

Op de Mozilla developer site is een uitgebreid artikel te vinden over dit probleem.