I've been playing around with switching some of my PHP projects over to HTML5 as a learning exercise. It's been going pretty well other than one strange problem involving image links and the font-size CSS attribute.

First, check out this link:
http://www.projectlibertine.com/weirdhtml.php

The first grid of squares is formed with 3 rows of <a href> tags with a <br /> tag at the end of each row. In the past this always produced a nice tight set of graphics with very little space between them.

Now when I switched the doctype over to HTML5 it's putting a lot of space between the images, especially vertically. I fought with it for several hours and the only thing I found that would fix it is to change the CSS for enclosing div attribute font-size to be "font-size = 1pt;".

In the second grid on the page you can see the results of doing that. So I know how to fix the problem, but I really don't understand the relationship between font-size and the (mostly) vertical distance between image <a> links.
Shared publiclyView activity