Inline Blocks have this weird space in-between them. I could live with it, up to a point where, if I load more content with an AJAX Call, the tiny space goes away. I know I'm missing something here.
border: 1px solid red;
outline: 1px solid blue;
The space is in the HTML. There are several possible solutions. From best to worst:
float: leftinstead of
display: inline-block, but this has undesirable effects on t he height: http://jsfiddle.net/AWMMT/3/
font-sizeto 0 and set an appropriate
font-sizefor the internal elements: http://jsfiddle.net/AWMMT/4/ -- this is pretty simple, but then you can't take advantage of relative font size rules on the internal elements (percentages, em)