SPAN 与 DIV（内联块）

Question

是否有任何理由使用<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>

Answer 1

根据 HTML 规范， <span>是内联元素， <div>是块元素。 现在可以使用display CSS 属性进行更改，但存在一个问题：就 HTML 验证而言，您不能将块元素放在内联元素中，因此：

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

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

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

Answer 2

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

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

请注意，并非所有浏览器都支持 inline-block。 例如在 Firefox 2 及更低版本中，您必须使用：

display: -moz-inline-stack;

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

有一个伟大的文章， 在这里创建跨浏览器的inline-block的元素。

Answer 3

1. 内联块是将元素的显示设置为内联或块之间的中间点。 它像 display:inline 一样将元素保持在文档的内联流中，但您可以像使用 display:block 一样操作元素的框属性（宽度、高度和垂直边距）。

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

Answer 4

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

Answer 5

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

问题：内联元素（例如跨度、a、按钮、输入等）仅在水平（左边距和右边距）上而不是垂直上采用“边距”。 垂直间距仅适用于块元素（或者如果设置了“display:block”）

解决方案：只有通过“display:inline-block”也会取垂直距离（顶部和底部）。 原因：内联元素跨度，现在在外部表现得像块元素，但在内部表现得像内联元素

这里代码示例：

 /* 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>

Answer 6

正如其他人所回答的那样...... div是一个“块元素”（现在重新定义为Flow Content ）而span是一个“内联元素”（短语内容）。 是的，您可以更改这些元素的默认呈现方式，但“流”与“块”、“短语”与“内联”之间存在差异。

归类为流畅内容的元素只能在需要流畅内容的地方使用，归类为短语内容的元素可以在需要短语内容的地方使用。 由于所有短语内容都是流内容，因此也可以在任何需要流内容的地方使用短语元素。 规格提供了更详细的信息。

所有短语元素，例如strong和em ，只能包含其他短语元素：例如，您不能在cite放置table 。 大多数流内容，例如div和li可以包含所有类型的流内容（以及短语内容），但有一些例外： p 、 pre和th是非短语流内容（“块元素”）的示例只能包含短语内容（“内联元素”）。 当然也有正常的元素限制，例如dl和table只允许包含某些元素。

虽然div和p都是非短语流内容，但div可以包含其他流内容子项（包括更多div和p ）。 另一方面， p可能只包含子句内容。 这意味着您不能将div放在p ，即使两者都是非短语流元素。

现在是踢球者。 这些语义规范与元素的显示方式无关。 因此，如果您在span有一个div ，即使您的 CSS 中有span {display: block;}和div {display: inline;} ，您也会收到验证错误。