兩者之間有什么不同 <div> <span>如果我將display設置為：阻止還是內聯？</span>

Question

<div style="display: inline"></div>
<span></span>

<div></div>
<span style="display:block></span>

<div style="display: inline-block"></div>
<span style="display: inline-block"></span>

如果我這樣寫， <div>和<span>什么區別

Answer 1

就CSS而言，沒有區別。 您可以隨意設置任何元素的樣式，無論其語義如何。

同樣，就HTML而言，使用CSS設置樣式的方式不會影響其性質。 <div>始終接受任何流內容（ 通常在CSS中表示為塊級元素）或短語內容（通常在CSS中表示為內聯元素）。 但是請注意，這兩個概念之間沒有必要的關聯。 另一方面， <span>只能具有短語內容。

在有效的HTML中，這意味着<div>可以包含<span> ，而<span>不能包含<div> 。

這兩個元素是相似的，因為它們本身沒有語義。 它們只是用作內容的分組元素，通常用於樣式目的。

有關更多詳細信息，請參見<div>和<span>的HTML5規范。

Answer 2

div

• 一個“塊級元素”
• 可以包含所有其他元素！
• 只能在其他塊級元素內
• 在頁面上定義一個矩形區域
• 嘗試盡可能寬
• 從“換行”開始，並在末尾帶有“回車”，例如<p>

跨度

• 一個“內聯元素”
• 不能包含塊級元素！！
• 可以在任何其他元素內
• 在頁面上定義“蛇”
• 盡量縮小
• 不創建任何新行

從渲染的角度來看，

<span> == <div style="display: inline">

和

<div> == <span style="display: block">

至於HTML語法，但是div不能嵌套在內inline元素inline ，而span不能包含塊級元素。

神秘的"display: inline-block"

block vs inline vs inline-block

以下是一堆具有不同顯示方式的設置：

如您所見， inline-block是一種混合動力：

• 創建一個矩形區域（塊）
• 不創建任何新行（因此為“ in line”）

欲獲得更多信息

帶顯示內嵌塊顯示怪異（CSS）的Div

DIV的原樣與帶有display：block的SPAN之間的區別

http://quirksmode.org/css/css2/display.html

Answer 3

重點是基於HTML規范， span標簽是inline元素，而div標簽是block元素，這兩個可以使用CSS中的display規則進行更改。

因此，如果您更改display ，則不會有任何區別。

但是就這些通常的使用方式而言，您可以考慮使用div將這些部分包裝在DOM中，而span標簽主要用於包裝文本和內容。

查閱HTML規范文檔以獲取更多信息。