I know it's wrong to put a block element inside an inline element, but what about the following?

Imagine this valid markup:

<div><p>This is a paragraph</p></div>

Now add this CSS:

div {
   display:inline;
}

This creates a situation where an inline element contains a block element (The div becomes inline and the p is block by default)

Are the page elements still valid?

How and when do we judge if the HTML is valid - before or after the CSS rules are applied?

UPDATE: I've since learned that in HTML5 it is perfectly valid to put block level elements inside link tags eg:

<a href="#">
      <h1>Heading</h1>
      <p>Paragraph.</p>
</a>

This is actually really useful if you want a large block of HTML to be a link.

Edit
Report