Getting rid of spaces between vertically-stacked images
So you’ve got an HTML page (or HTML e-mail) with vertically-stacked images. And you’ve noticed a little problem: Each image is followed by a line of blank white space.
So you check your code. You remove all of the line breaks and spaces from around your img tag. Then you refresh your browser window. And guess what: you’ve still got spaces.
The issue (properly) occurs when your document has a strict or XHTML 1.1 DOCTYPE (view an example). Most browsers (including IE 6) will add a thin space after each image. That‘s fine if you’re just organizing images on a page. But for e-mail layouts, and splash pages, you probably don’t want that space.
The solution
You‘re in luck: There are three.
- Switch to a transitional
DOCTYPE - Use an HTML 3.2
DOCTYPE - Use the
display: block;property and value of CSS.
Switching to a transitional DOCTYPE will send most browsers into quirks mode. You’ll need to use a few more hacks to get Internet Explorer 6 to behave, but it‘s not a bad option.
Using HTML 3.2 also provides good consistency, but you lose the ability to use CSS and scripting. It’s not so bad for HTML e-mails, though.
You could also eliminate the DOCTYPE entirely, but I don’t recommend this because it will result in all kinds of browser wackiness.
For best results, I recommend sticking with the strict DOCTYPE, and using display: block; in your CSS. Doing so presents the best cross-browser rendering, while still solving the post-image space issue.
