Block Level Elements inside Inline elements [duplicate]

Question

The W3C Validator tells me I can't put block-level elements inside inline elements. Makes sense...

but what if I'm using CSS to change that block-level element into an inline element?

And what if I'm using CSS to convert an inline element into a block-level element (when inside another inline element)?

The Validator doesn't pick up on this obviously, but is it wrong?

(I'm not actually doing this, I'm just wondering about best-practice)

Answer 1

An element defined as a block element in the HTML specification is not the same as a element defined as display: block; in CSS.

With this I mean: Even if you say <p style="display: inline;">Lorem...</p>. The <p> will still be a block element in the eyes of HTML.

HTML, CSS and JavaScript if used right is said to have loose coupling toward each other and that one should not be dependent of another and that the absence of one should not make the others (or the system as whole) fail.

Answer 2

An element that is inline elements should not contain block elements. Block elements can contain block and/or inline elements while inline elements can only contain other inline (including inline-block, such as <img>) elements.

You can of course do it anyways, since the graphical representation will be pretty consistent across browsers. It's still not something I'd recommend though, and can't really think of a reason to do it either.