Why is there a space on top of unordered list items?

css, firefox, html, html-lists

Solution

This seems to be an issue with list styles clashing with inline elements preceding/containing block elements such as `h3` and `p`. This issue does not occur if you

set `ul` to `list-style-type: none`

set `li` to anything other than `display: list-item`

set `a` to `display: block`

remove the `a` element altogether

set `h3` to anything other than `display: block`

I can't find anything in the CSS2.1 spec that would determine whether this behavior is a bug in Firefox, or a bug in other browsers. In fact, under `list-style-position`, it says that the exact position or layout of the marker box (containing the bullet) is undefined, even with respect to the box that's created by the `li` element itself (the principal box) or any of its children.

Given your situation, the third option may be the best workaround that wouldn't compromise the layout much, if at all. If you're going to turn the entire contents of the list item into a link anyway, you may as well display it as a block. That way everything is safely contained in a block box, whose rendering is very clearly-defined and completely reliable.

Problem

Original source