Question

So, I’ve got a standard nested ul li list inside another li, such as this:

<li><a href="#">Link</a>
    <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</li>

The ul and all it’s children have display:block; but still, there is a 3px padding on the right of the parent li.

The issue is simplest presented by just looking at it yourself:
link

look at the third link

However, this issue dissapears when all whitespace is removed from the HTML above in between the closing of the topmost anchor tag and the lowermost closing li tag.

This seems to be happening in Chrome and Firefox, and I hadn’t tested further but instead wanted to ask around here to see if this is some common knowledge that I am lacking or is this a proper bug.

Answer 1

Since you have a display: inline; on your lis the whitespaces/linebreaks after the <a> element in your third li get displayed as a single whitespace.

If you float the lis and leave the default display: block; you get the same horizontal list without this effect.