3

I'm writing example code for everything in HTML and CSS. I came across display:inline and wrote a few snippets to explain how a naturally block level element (<div>) would function as an inline element. In recent studies, I've found that modern browsers will automatically escape a <p> tag when it comes across a <div> within a <p>.

My JSFiddle example you can view here shows this in action. If you inspect the <p> element, you'll find that the <div> is no-longer inside of the paragraph. I'd like to know why, as the <div> should be treated as an inline element.

Thanks!

Akaishen
  • 418
  • 3
  • 12

5 Answers5

4

HTML5 allows for anchor elements to wrap block level elements, but all other inline elements must not contain block level elements. The paragraph element is a strange one, as it is actually block level, but it cannot contain further block level elements (source: http://www.w3.org/TR/html4/struct/text.html#h-9.3.1).

Keep in mind that even though a block level element may behave as though it is inline if you set display: inline; it is still a block level element.

joshnh
  • 8,374
  • 4
  • 35
  • 53
  • 2
    +1 for the reference. For the record "The P element represents a paragraph. It cannot contain block-level elements (including P itself)." Nuff said. – j08691 Feb 13 '12 at 04:10
  • 1
    I was looking, specifically, as to why a block level element, made to be inline through CSS, could not be nested within a `

    ` tag. I feel your answer is the most thorough explanation. CSS may control the 'display' of HTML, though it is not changing what the elements 'are'. Thank you, and everyone else, who took the time to answer.

     – Akaishen Feb 13 '12 at 04:27
1

You can't have block elements inside inline elements even if you declare them as inline. Even though <p> are block elements, they're an exception. Use a <span> instead which is display: inline by default.

elclanrs
  • 92,861
  • 21
  • 134
  • 171
  • Paragraphs are not inline elements, they are a special exception to the normal rule though, and cannot contain further block level elements. – joshnh Feb 13 '12 at 04:07
  • `

    ` is a block element. The rule against block elements inside inline elements doesn't apply.

     – cHao Feb 13 '12 at 04:10
  • 1
    Oh I see what you mean. I just know that it can't be done but haven't done the necessary research. My bad. I just edited the question to reflect this. – elclanrs Feb 13 '12 at 04:14
0

A <p> may contain inline elements and text, but not other block elements. (Add to that, to the HTML parser, a block element is a block element...even when its CSS specifies display: inline.) When a block element appears within it, the <p> ends where the other element starts.

cHao
  • 84,970
  • 20
  • 145
  • 172
0

A DIV is a block-level element even if you change its display property. That's not allowed inside of a paragraph, so the behavior is undefined. With this understanding, it seems reasonable that the browser would correct the HTML so that it makes sense.

To quote the spec:

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

-1

Obviously

Don't ever put block elements inside inline elements. If you do, in most cases, nothing bad will happen.

Probably many of us do it anyways and it seems to work, but it's "go to hell" incorrect. Block elements visually begin on a new line. They can contain inline and other block-level elements ( div, p, ul, etc. ). Inline elements visually don't begin on a new line. They contain only text and other inline elements ( span, a, img, etc. ).

You might be wondering what's the difference between a block-level element ( ) and using CSS to make an inline element a block-level element ( ).

If an element by default -- like a div -- is a block-level element then it cannot be placed inside an inline element. However, an inline element made into a block-level element via CSS can be placed inside an inline element. This is because the style that's applied is irrelevant to the correctness of the markup. In other words, styling is our stated intention for what the element should look like and that's completely separate from valid markup.

j08691
  • 204,283
  • 31
  • 260
  • 272
Kai
  • 79
  • 2
  • `p` is not an inline element. So this whole answer is pretty much irrelevant. (Not my downvote, though.) – cHao Feb 13 '12 at 14:57