<a><p/></a> invalid, but a > span {display:block} valid?

I'm not supposed to place a block-level element within an inline element, but I can set the display of an inline element nested within another inline element to block.

For instance this would be invalid and make browsers go haywire.



However this seems to be perfectly fine.



Why is that ?
What am I missing ?

<p> is a block element, while <span> and <a> are inline elements. Inline elements can be nested within each other and within block elements, but block elements cannot be nested within inline elements.

edit: Didn't see the part about displaying the span as a block. Strange.

I don't think the issue is really that its a block level element. Its more that browsers use block level elements to determine what is layout from what is content. Browsers have a hard time understanding where the boundaries of click able objects extend in the stacking order if the content of an anchor isn't inline (IE not layout). I assume this is a throwback from the early days when people didn't make links with anything other than text. Sort of the same way IE6 doesn't understand li:hover.

Coincidently this might be a safety mechanism as well since your browser would have a really hard time with something like

In a case like that I'm pretty sure most browsers would freakout and who knows which element would receive a click

my gut tells me that its allowing the block declaration in the CSS since a browser inherently knows what to do with an <a> without relying on the css for more information outside of styling the content. The CSS thing is a really nice workaround for when you need a large block of content to be clickable though.