Can inline elements contain block elements?

Question

Can an inline element contain a block element for instance: can a list have a paragraph?

possible duplicate of [Block Level Elements inside Inline elements](http://stackoverflow.com/questions/1714121/block-level-elements-inside-inline-elements) — JohnP, Jun 22 '11 at 12:19
Nope. To answer your second question, a list is not an inline element. A list can contain P or DIV tags or whatever. — JohnP, Jun 22 '11 at 12:22

Alohci · Accepted Answer · 2011-06-25T15:13:09.517

7

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.

edited Jun 25 '11 at 15:13

answered Jun 22 '11 at 13:12

Alohci

73,780
12
107
149

I know this is a really old post, but HTML5 does allow you to wrap tags around just about anything, include block level elements. – d512 May 21 '16 at 18:31
2

@user1334007 - indeed, providing the wrapped elements would be valid if they were children of the `` element's parent and the `` element is a valid descendant of its ancestors. But on the other hand, there's no such thing as either a block element or an inline element in HTML5. `` is *phrasing element*. Block and inline were concepts of HTML 4, and remain concepts in CSS, which has its own rules about what happens when inline elements contain block elements, but is not concerned with the validity of HTML content models. – Alohci May 21 '16 at 22:06

score 2 · Answer 2 · edited May 23 '17 at 12:09

2

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?

edited May 23 '17 at 12:09

Community

1
1

answered Jun 22 '11 at 12:21

David Amey

1,392
1
12
11

score 0 · Answer 3 · answered Nov 26 '15 at 14:20

0

Inline element can't contain block element and block element can contain all kind of. <li> , that you've mentioned, is not an inline element it's a block element as <p> , so both can contain each others

answered Nov 26 '15 at 14:20

Haykui

1

score 0 · Answer 4 · answered Oct 30 '18 at 18:43

0

block-level elements cannot descend from inline-level elements

Eric Meyer book "CSS The dfinitive Guid" page 9

answered Oct 30 '18 at 18:43

Ayman Morsy

992
6
21

score 0 · Answer 5 · edited May 23 '17 at 12:09

0

It's incorrect markup to use a block element within an inline one. It may still render if the browser and Doctype are lenient, but it's not valid.

You can usee CSS, however, as discussed here.

edited May 23 '17 at 12:09

Community

1
1

answered Jun 22 '11 at 12:21

Widor

12,605
6
38
62

score 0 · Answer 6 · answered Jun 22 '11 at 12:36

0

If you want block elements to behave like inline elements, set the display property to inline-block. If you need to support IE 7 or 6, for the same elements in your IE stylesheet, add these two rules: zoom:1; display:inline.

answered Jun 22 '11 at 12:36

timw4mail

1,626
2
12
16

score -5 · Answer 7 · answered Jun 22 '11 at 12:23

-5

<li> & <p> both are inline elements. so you can use <p> inside <li>

answered Jun 22 '11 at 12:23

Ahsan Rathod

5,397
2
19
25

1

`p` elements are block elements, not inline. However, they can only contain inline elements. – James Allardice Jun 22 '11 at 12:25
2

LIs are not inline. Neither are P tags. LIs allow block level content in them : http://htmlhelp.com/reference/html40/block.html. Please update your answer. – JohnP Jun 22 '11 at 12:27
1

Sorry i got confused. Pardon me.. Thanks for classifications. – Ahsan Rathod Jun 22 '11 at 12:31

Can inline elements contain block elements?

7 Answers7

Linked