是否有理由使用<div style="display:inline-block">代替<span>来布局网页？
我可以将内容嵌套在范围内吗？什么是有效的，什么不是？
可以使用它来制作像布局一样的3x2表吗？
<div>
<span> content1(divs,p, spans, etc) </span>
<span> content2(divs,p, spans, etc) </span>
<span> content3(divs,p, spans, etc) </span>
</div>
<div>
<span> content4(divs,p, spans, etc) </span>
<span> content5(divs,p, spans, etc) </span>
<span> content6(divs,p, spans, etc) </span>
</div>
答案 0 :(得分：183)
According to the HTML spec，<span>是内联元素，<div>是块元素。现在可以使用display CSS属性进行更改，但存在一个问题：就HTML验证而言，您不能将块元素放在内联元素中：
<p>...<div>foo</div>...</p>
<div>更改为inline或inline-block，也不会完全有效。
因此，如果您的元素为inline或inline-block，请使用<span>。如果它是block级元素，请使用<div>。
答案 1 :(得分：19)
如果你想拥有一个有效的xhtml文档，那么就不能在段落中加入div。
此外，具有属性display的div：inline-block的工作方式与span不同。默认情况下，span是内联元素，您无法设置与块关联的宽度，高度和其他属性。另一方面，具有内联块属性的元素仍将与任何周围文本“流动”，但您可以设置宽度，高度等属性。具有属性display：block的span将不以与内联块元素相同的方式流动，但会创建回车并具有默认边距。
请注意，并非所有浏览器都支持内联块。例如，在Firefox 2及更低版本中，您必须使用：
display: -moz-inline-stack;
显示与FF3中的内联块元素略有不同。
有关于创建跨浏览器内联块元素的精彩文章here。
答案 2 :(得分：5)
内联块是将元素的显示设置为内联或阻止之间的中间点。它将元素保持在文档的内联流中，如display：inline，但是可以使用display：block来操纵元素的框属性（宽度，高度和垂直边距）。
我们不能在内联元素中使用块元素。这是无效的，没有理由这样做。
答案 3 :(得分：3)
我知道这个Q已经老了，但为什么不使用所有DIV而不是SPAN？ 然后一切都快乐起来。
示例：
<div>
<div> content1(divs,p, spans, etc) </div>
<div> content2(divs,p, spans, etc) </div>
<div> content3(divs,p, spans, etc) </div>
</div>
<div>
<div> content4(divs,p, spans, etc) </div>
<div> content5(divs,p, spans, etc) </div>
<div> content6(divs,p, spans, etc) </div>
</div>
答案 4 :(得分：2)
正如其他人回答的那样...... div是一个“块元素”（现在重新定义为流量内容），而span是一个“内联元素”（ Phrasing内容）。是的，您可以更改这些元素的默认表示，但“流”与“阻止”，“短语”与“内联”之间存在差异。
分类为流内容的元素只能在预期流量内容的情况下使用，并且可以在期望短语内容的情况下使用分类为措辞内容的元素。由于所有措辞内容都是流内容，因此在预期流内容的任何地方也可以使用措辞元素。 The specs provide more detailed info
所有短语元素（例如strong和em）只能 包含其他短语元素：您不能在{{1}内放置table 1}}例如。 大多数流媒体内容（例如cite和div）可以包含所有类型的流内容（以及短语内容），但也有一些例外情况：li ，p和pre是非短语流内容（“块元素”）的示例，它们仅包含短语内容（“内联元素”）。当然还有正常的元素限制，例如th和dl只允许包含某些元素。
虽然table和div都是非短语流内容，但p可以包含其他流内容子项（包括更多div和div S）。另一方面，p可能只包含措辞内容的子项。这意味着您无法将p置于div内，即使两者都是非措辞流元素。
现在这里是踢球者。这些语义规范与元素的显示方式无关。因此，如果p中有div，即使您的CSS中有span和span {display: block;}，也会收到验证错误。
答案 5 :(得分：1)
我认为它将帮助您理解Inline-Elements（例如span）和Block-Elements（例如div）之间的基本差异，以便理解为什么“display：inline-block”如此有用。
问题：内联元素（例如span，a，button，input等）仅在垂直（margin-left和margin-right）上取“margin”，而不是horizontaly。垂直间距仅适用于块元素（或者如果设置了“display：block”）
解决方案：只有通过“display：inline-block”也会占用垂直距离（顶部和底部）。原因：内联元素Span现在表现得像外部的块元素，但就像
中的内联元素一样此处代码示例：
/* Inlineelement */
div,
span {
margin: 30px;
}
span {
outline: firebrick dotted medium;
background-color: antiquewhite;
}
span.mitDisplayBlock {
background: #a2a2a2;
display: block;
width: 200px;
height: 200px;
}
span.beispielMargin {
margin: 20px;
}
span.beispielMarginDisplayInlineBlock {
display: inline-block;
}
span.beispielMarginDisplayInline {
display: inline;
}
span.beispielMarginDisplayBlock {
display: block;
}
/* Blockelement */
div {
outline: orange dotted medium;
background-color: deepskyblue;
}
.paddingDiv {
padding: 20px;
background-color: blanchedalmond;
}
.marginDivWrapper {
background-color: aliceblue;
}
.marginDiv {
margin: 20px;
background-color: blanchedalmond;
}
</style>
<style>
/* Nur für das w3school Bild */
#w3_DIV_1 {
bottom: 0px;
box-sizing: border-box;
height: 391px;
left: 0px;
position: relative;
right: 0px;
text-size-adjust: 100%;
top: 0px;
width: 913.984px;
perspective-origin: 456.984px 195.5px;
transform-origin: 456.984px 195.5px;
background: rgb(241, 241, 241) none repeat scroll 0% 0% / auto padding-box border-box;
border: 2px dashed rgb(187, 187, 187);
font: normal normal 400 normal 15px / 22.5px Lato, sans-serif;
padding: 45px;
transition: all 0.25s ease-in-out 0s;
}
/*#w3_DIV_1*/
#w3_DIV_1:before {
bottom: 349.047px;
box-sizing: border-box;
content: '"Margin"';
display: block;
height: 31px;
left: 0px;
position: absolute;
right: 0px;
text-align: center;
text-size-adjust: 100%;
top: 6.95312px;
width: 909.984px;
perspective-origin: 454.984px 15.5px;
transform-origin: 454.984px 15.5px;
font: normal normal 400 normal 21px / 31.5px Lato, sans-serif;
}
/*#w3_DIV_1:before*/
#w3_DIV_2 {
bottom: 0px;
box-sizing: border-box;
color: black;
height: 297px;
left: 0px;
position: relative;
right: 0px;
text-decoration: none solid rgb(255, 255, 255);
text-size-adjust: 100%;
top: 0px;
width: 819.984px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 409.984px 148.5px;
transform-origin: 409.984px 148.5px;
caret-color: rgb(255, 255, 255);
background: rgb(76, 175, 80) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(255, 255, 255);
font: normal normal 400 normal 15px / 22.5px Lato, sans-serif;
outline: rgb(255, 255, 255) none 0px;
padding: 45px;
}
/*#w3_DIV_2*/
#w3_DIV_2:before {
bottom: 258.578px;
box-sizing: border-box;
content: '"Border"';
display: block;
height: 31px;
left: 0px;
position: absolute;
right: 0px;
text-align: center;
text-size-adjust: 100%;
top: 7.42188px;
width: 819.984px;
perspective-origin: 409.984px 15.5px;
transform-origin: 409.984px 15.5px;
font: normal normal 400 normal 21px / 31.5px Lato, sans-serif;
}
/*#w3_DIV_2:before*/
#w3_DIV_3 {
bottom: 0px;
box-sizing: border-box;
height: 207px;
left: 0px;
position: relative;
right: 0px;
text-size-adjust: 100%;
top: 0px;
width: 729.984px;
perspective-origin: 364.984px 103.5px;
transform-origin: 364.984px 103.5px;
background: rgb(241, 241, 241) none repeat scroll 0% 0% / auto padding-box border-box;
font: normal normal 400 normal 15px / 22.5px Lato, sans-serif;
padding: 45px;
}
/*#w3_DIV_3*/
#w3_DIV_3:before {
bottom: 168.344px;
box-sizing: border-box;
content: '"Padding"';
display: block;
height: 31px;
left: 3.64062px;
position: absolute;
right: -3.64062px;
text-align: center;
text-size-adjust: 100%;
top: 7.65625px;
width: 729.984px;
perspective-origin: 364.984px 15.5px;
transform-origin: 364.984px 15.5px;
font: normal normal 400 normal 21px / 31.5px Lato, sans-serif;
}
/*#w3_DIV_3:before*/
#w3_DIV_4 {
bottom: 0px;
box-sizing: border-box;
height: 117px;
left: 0px;
position: relative;
right: 0px;
text-size-adjust: 100%;
top: 0px;
width: 639.984px;
perspective-origin: 319.984px 58.5px;
transform-origin: 319.984px 58.5px;
background: rgb(191, 201, 101) none repeat scroll 0% 0% / auto padding-box border-box;
border: 2px dashed rgb(187, 187, 187);
font: normal normal 400 normal 15px / 22.5px Lato, sans-serif;
padding: 20px;
}
/*#w3_DIV_4*/
#w3_DIV_4:before {
box-sizing: border-box;
content: '"Content"';
display: block;
height: 73px;
text-align: center;
text-size-adjust: 100%;
width: 595.984px;
perspective-origin: 297.984px 36.5px;
transform-origin: 297.984px 36.5px;
font: normal normal 400 normal 21px / 73.5px Lato, sans-serif;
}
/*#w3_DIV_4:before*/ <h1> The Box model - content, padding, border, margin</h1>
<h2> Inline element - span</h2>
<span>Info: A span element can not have height and width (not without "display: block"), which means it takes the fixed inline size </span>
<span class="beispielMargin">
<b>Problem:</b> inline elements (eg span, a, button, input etc.) take "margin" only vertically (margin-left and margin-right)
on, not horizontal. Vertical spacing works only on block elements (or if display: block is set) </span>
<span class="beispielMarginDisplayInlineBlock">
<b>Solution</b> Only through
<b> "display: inline-block" </ b> will also take the vertical distance (top and bottom). Reason: Inline element Span,
behaves now like a block element to the outside, but like an inline element inside</span>
<span class="beispielMarginDisplayInline">Example: here "display: inline". See the margin with Inspector!</span>
<span class="beispielMarginDisplayBlock">Example: here "display: block". See the margin with Inspector!</span>
<span class="beispielMarginDisplayInlineBlock">Example: here "display: inline-block". See the margin with Inspector! </span>
<span class="mitDisplayBlock">Only with the "Display" -property and "block" -Value in addition, a width and height can be assigned. "span" is then like
a "div" block element. </span>
<h2>Inline-Element - Div</h2>
<div> A div automatically takes "display: block." </ div>
<div class = "paddingDiv"> Padding is for padding </ div>
<div class="marginDivWrapper">
Wrapper encapsulates the example "marginDiv" to clarify the "margin" (distance from inner element "marginDiv" to the text)
of the outer element "marginDivWrapper". Here 20px;)
<div class = "marginDiv"> margin is for the margins </ div>
And there, too, 20px;
</div>
<h2>w3school sample image </h2>
source:
<a href="https://www.w3schools.com/css/css_boxmodel.asp">CSS Box Model</a>
<div id="w3_DIV_1">
<div id="w3_DIV_2">
<div id="w3_DIV_3">
<div id="w3_DIV_4">
</div>
</div>
</div>
</div>