Block Level Elements inside Inline elements

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)

Solution 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.

Solution 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.

Comments

[Jovylle]

This generation, they're becoming dependent to each other.

[Sebastian Nielsen]

@JovylleBermudez How so? In what way? Do you have an example?

[Sebastian Nielsen]

An <a> (inline element) is quite often seen containing a <div> (block element).

[Jovylle]

After few months, I'm not sure not why I said that, did the answer changed? But one thing is for sure, the block element will cause a line break to the inline element where it is inside.