为什么内联div的行为不同于内联span [英] Why does an inline div behave differently than an inline span

问题描述

我尝试内联div，但它不工作。

很难解释，请看下面的链接：

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> sasfsalfalfsjsjsjf< / em>< / p&问题是，为什么p块不包含第二个例子中第一行之后的元素，因此，这个问题就是为什么p块不包含第二个例子中的第一行之后的元素的原因：
  

$ b <

我猜想问题在于div的默认属性。解决方案

你不应该在这样的元素里面使用 div ，这就是为什么我们 code>

< div> 关闭 p> 标记，因为如果后面跟着另一个块元素，则不需要结尾< / p> 因此< p> 已关闭，我们都知道< p>

如果p元素紧跟一个地址，article，aside，blockquote， dir，div，dl，fieldset，footer，form，h1，h2，h3，h4，h5，h6，header，hr，menu，nav，ol，p，pre，section，table或ul元素，

{从另一个答案窃取链接} w3对段落标签

请查看 < p> vs < div>

div和span tag

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

解决方案

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

这篇关于为什么内联div的行为不同于内联span的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！