Collapsing Padding in List Items?

HTML & CSS
1

I have a question pertaining to the box model and calculated sizes of content boxes. Here are the relevant bits:

Markup:


<ul>
	<li><a>Top Level 1</a></li>
	<li><a>Top Level 2</a></li>
</ul>

Style:


a {
	padding: .5em 2em;
	border: solid 2px white;
	border-radius: 1.5em;
	color: white;
	background-color: blue;
	-webkit-background-clip: padding-box;
	-webkit-box-shadow: 0 2px 3px #333;
	text-shadow: 0 1px 0 #333;
}

a:hover {
	-webkit-box-shadow: 0 0 8px #fff;
	font-size: 1.2em;
	text-shadow: none;
}

As you can see the 2 ‘a’ tags in the list run into each other. I want to know why it is that the ‘li’ tags don’t consider all the stuff inside (the entire ‘a’ tag including padding and border) as part of its content block. It seems like the 'a’s padding is just hanging outside of the ‘li’ and that doesn’t feel intuitive or right at all. Is there an explanation about how nesting works with padding that I am missing? Can someone explain this behavior?

2

Do you know where this behavior is documented? I would like to get a better understanding of the different display types and how they are contained inside their ancestor elements. What I am building is more academic anyway so the final result isn’t as important to me as understanding what is going on here.

This part of the CSS specs has helped me quite a bit.

However inlines have all these funky boxes and lines around them… I use David Baron’s inline page (sent to me by Gary Turner) to “see” how things like line-height and vertical-align work.

It appears that what I was looking for was to set the <a> elements to display:inline-block. This achieved exactly what I was looking for (in webkit at least).

Because anchors start out as inlines, inline-block will work in IE6&7 as well (if the element is originally a block or something else, then IE needs some hacks).
The engines used in Firefox 2 needs a hack. Current browsers such as K-Meleon still use this older Gecko engine. Usually it’s
display: -moz-inline-box;
or
display: -moz-inline-block; (whichever one looks right in the FF2-browsers is the one to use)
which would go before the regular declaration. If you’re not supporting those browsers then you don’t need it. All modern browsers and IE8 support regular display: inline-block;

3

I found this too:

http://www.maxdesign.com.au/articles/inline/

4

Bad manners, I agree. I was looking to see if I could delete that thread because I thought this was a better place as well.

So this is about the <a> tag being inline for sure. When I add display:block to the rule I see that they do not collide, but now I would have to set the width statically. That’s not what I was looking for.

Your suggestion works for the case that everything in the list was going to be about the same height, but I am not sure of that either.

Do you know where this behavior is documented? I would like to get a better understanding of the different display types and how they are contained inside their ancestor elements. What I am building is more academic anyway so the final result isn’t as important to me as understanding what is going on here.

UPDATE:

It appears that what I was looking for was to set the <a> elements to display:inline-block. This achieved exactly what I was looking for (in webkit at least).

UPDATE 2:

This page is very helpful in understanding the concepts http://www.quirksmode.org/css/display.html

5

Double posting is bad manners. :wink: Anyway, this is probably a better place to post.

This is the natural behavior for inline elements (like <a>).

You could do something like this to fix things:

li {line-height: 3em;}