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;} ，您也會收到驗證錯誤。