Quirky margins on inline elements

We all know that IE 6 will display a carriage return after a block-level element inside another block-level element, one such example being an unordered list, converted into menu navigation. The simple fix is to set the list-items to display inline. However, with those same inline list-items, if there is margin applied, something weird happens in a large amount of browsers.

A mysterious bug occurs when block-level elements are inside inline elements: the inline elements display their margins and take up space, displacing the block-level anchor elements. This happens in: IE 8; FF 2, 3, 3.5; Opera 9, 10; Safari 4. Weird margins happen in a different way, strangely, in IE 6 and 7.

Inline elements with block-level children displaying weird margins in Firefox 3.5

Weirder yet, when the elements are floated, different kinds of things still happen in IE 8, FF 3.5, and Opera 10.

Head over to the test page to see weird inline margin rendering.

This entry was posted in techthings and tagged , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *