Why does an inline div behave differently than an inline span

Question

I've tried to inline div but it does not work.

It's hard to explain so see the link below:

http://jsfiddle.net/CsS5v/1/

<p style="background:red;">SDFDSDSFDSSFDAFASasf<br /> <span style="background: blue;   display:inline;">sadfasfasdf</span><em>sasfsalfjsalfjalsjf</em></p>
<p style="background:red;">SDFDSDSFDSSFDAFASasf<br /> <div style="background: blue; display:inline;">sadfasfasdf</div><em>sasfsalfjsalfjalsjf</em></p>

The question is why does the p block does not contain the elements after the first line in the second example where I used div instead of span?

I am speculating the problem lies in default properties of div

Answer 1

you shouldn't use a div inside of an element like that, that is why we have spans.

the <div> closes the <p> tag, because you don't need an ending </p> if it is followed by another block Element. so the <p> is closed and we are all aware that a <p> has a following line break added automatically.

A p element’s end tag may be omitted if the p element is immediately followed by an address, article, aside, blockquote, dir, div, dl, fieldset, footer, form, h1, h2, h3, h4, h5, h6, header, hr, menu, nav, ol, p, pre, section, table, or ul element, or if there is no more content in the parent element and the parent element is not an a element.

{Stolen link from another answer} w3 on Paragraph tags

please check this out on <p> vs <div>

and perhaps this as well

difference between div and span tag

Answer 2

It is incorrect syntax to put a div inside of a p.

For more information on block elements, div span and p elements, see https://developer.mozilla.org/en-US/docs/HTML/Block-level_elements

Answer 3

You can't nest block level elements inside of a <p> - only phrasing content is permitted (which includes a <span> and all other elements in the inline formatting context)

If you inspect your example you'll see that the <div> is automatically removed from outside the paragraph (the <p> acts like a self-closing element) and you end up with two lines boxes (the inline <div> and the <em>) and an empty block level <p> on the next line.

Answer 4

It looks like this has to do that a <div> can not be inside a <p>, but a <span> can be. So then the <div> get's pushed down because of the margin of the <p>.

The <span> stays inside the <p> so it is not pushed down by the margin of the <p>.

You can see this behavior clearly when using firebug.

Answer 5

Look into an inspector (Firebug or something).

This is because browser closes while parsing HTML <p> element before <div> because semantics of HTML says that there should not be any <div> in <p

Answer 6

In short, it is impossible to place a div element inside a p. Opening div tag will automatically close the p element.

Longer version :

Form the w3c recommendation see 9.3.1 Paragraphs: the P element you can read :

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

I think you guessed it already but the div tag is a block element even though you specified the css display to be inline. Hence the behavior described

Answer 7

It is not valid to have a block-level element within a <p> so the browser may quite legitimately close the <p> and open a new one after the </div> when interpreting the markup.

w3 link

The p element