Menu
Can an inline element contain a block element for instance: can a list have a paragraph?
701
Generally, inline elements may contain only data and other inline elements. An exception is the inline a element which may contain block level elements such as div .
By default, block-level elements begin on new lines, but inline elements can start anywhere in a line. The distinction of block-level vs. inline elements was used in HTML specifications up to 4.01.
Yes, you can have nested block elements. You may need to use floats or positioning to keep them from stacking though. I think you may be confusing having a block element child of a block element (good) with a block element that is a child of an inline element (will probably render fine; but violates standards).
Leaving aside the fact that LI and P are both block level ...
It's never valid to do so, but in behavioural terms, sometimes you can nest a block level element inside a inline level one, but it depends on the browser parser.
For example, in FireFox 3.x, with this markup
<!DOCTYPE html>
<i>
foo
<div>bar</div>
baz
</i>
will display foo, bar, and baz all in italics.
But this markup, replacing the inline element <i> with inline element <var> (which also has italics as its default rendering)
<!DOCTYPE html>
<var>
foo
<div>bar</div>
baz
</var>
will only display foo in italics.
JSFiddle for this
Other browsers do not behave the same. Which is one reason why you should stick to using valid markup.
116
It can, but it won't pass validation. There are ways round it that have been thoroughly discussed here: Is it wrong to change a block element to inline with CSS if it contains another block element?
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
