[quote]2) Valid code but weird whitespace: http://g-b.dk/sample2.htm
There’s a 4px gap under the image in this sample block, but there’s no obvious whitespace in the code. How can I close the gap while keeping the code valid? I’ve put the relevant CSS directly inline for easy reviewing.[/quote]
This one is easy. There are mainly two types of boxes: block-level and inline. An inline element is designed to flow along with text. And of course with text, you have a baseline. The baseline is the invisible line that the letters appear to sit on, and letters like j, y and g have parts of their glyphs drawn below the baseline. This concept of a baseline is represented in HTML in each line box (an invisible horizontal box in which each line of text resides.) Thus when you have an image in a line box, the image rests on the baseline for that linebox. And this happens even if the image is the only thing in the linebox.
Unless you make the image block-level. To do that, you need to do something like
<img style="display: block;" >
Perl / MySQL / HTML+CSS