SPAN vs DIV (inline-block)

是否有任何理由使用 <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>
166697 次浏览
小开

根据 HTML spec ，<span>是一个内联元素，<div>是一个块元素。现在可以使用 display CSS 属性修改它，但是有一个问题: 在 HTML 验证方面，您不能将块元素放在内联元素中，因此:

<p>...<div>foo</div>...</p>

即使将 <div>改为 inline或 inline-block，也不是严格有效的。

因此，如果您的元素是 inline或者 inline-block，那么使用 <span>。如果它是 block级别的元素，那么使用 <div>。

小开

如果您想要有一个有效的 xhtml 文档，那么您不能将 div 放在段落中。

另外，带有 display: inline-block 属性的 div 与 span 的工作方式不同。Span 默认情况下是内联元素，不能设置与块关联的宽度、高度和其他属性。另一方面，具有 inline-block 属性的元素仍然会与周围的任何文本“流”，但是您可以设置属性，例如 width、 height 等。使用属性 display: block 的 span 将 没有以与 inline-block 元素相同的方式流动，但是将创建回车符并具有默认边距。

注意并不是所有的浏览器都支持内联块，比如在 Firefox 2或者更少的浏览器中你必须使用:

display: -moz-inline-stack;

它与 FF3中的内联块元素显示略有不同。

有一篇关于创建跨浏览器内联块元素的优秀文章 给你。

小开

我知道这个 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>
小开

  1. Inline-block 是将元素的显示设置为 inline 或 block 之间的中间点。它像 display: inline 那样将元素保留在文档的内联流中，但是您可以像处理 display: block 那样操作元素的 box 属性(宽度、高度和垂直边距)。

  2. 我们不能在内联元素中使用块元素。这是无效的，没有理由这样做。

小开

正如其他人所回答的... ... div是一个“块元素”(现在重新定义为 流量) ，而 span是一个“内联元素”(措辞内容)。是的，您可以更改这些元素的默认表示形式，但是“流”与“块”、“措辞”与“内联”之间是有区别的。

分类为 流量含量的元素只能在预期流量内容的情况下使用，分类为 措辞内容的元素可以在预期措辞内容的情况下使用。由于所有的措辞内容 是流量内容，一个措辞元素也可以使用任何地方的流量内容是预期的。说明书提供了更详细的信息.

所有的措辞元素，如 strong和 em，可以 em1包含其他措辞元素: 例如，你不能把一个 table放在一个 cite中。em2流量内容，如 div和 li可以包含所有类型的流量内容(以及措辞内容) ，但也有少数例外: p，pre和 th是非措辞流量内容(“块元素”)的例子，可以 em1包含措辞内容(“内联元素”)。当然，还有一些常规的元素限制，比如 dl和 table只允许包含某些元素。

虽然 div和 p都是非短语流量内容，但是 div可以包含其他流量内容儿童(包括更多的 div和 p)。另一方面，p可能只包含短语内容的孩子。这意味着您不能将 div放在 p中，即使它们都是非短语流元素。

重点来了。这些语义规范与元素的显示方式无关。因此，如果在 span中有 div，即使在 CSS 中有 span {display: block;}和 div {display: inline;}，也会得到验证错误。

小开

我认为它将帮助您理解 Inline-Elements (例如 span)和 Block-Elements (例如 div)之间的基本区别，以便理解为什么“ display: inline-block”如此有用。

问题 : 内联元素(如 span、 a、按钮、输入等)只在水平方向(边距-左边距和边距-右边距)上取“裕度”，而不是垂直方向。垂直间距仅适用于块元素(或者设置了“ 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>


提交答案