CODEWITHSUNDEEP
htmlcssparsingwhitespace
zarko.kuvalja
zarko.kuvalja

Reputation: 117

An <ul><li> list which has display:none; on itself and all children, still adds a 3px padding to the parent <li>

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.

Upvotes: 0

Views: 134

Answers (1)

Jona
Jona

Reputation: 2147

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.

Upvotes: 2

Related Questions