塊級元素和行內元素

Zero_A發表於2018-06-30

HTML 塊級元素和行內元素的一些總結。

列表

行內元素：

  • b, big, i, small
  • abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
  • a, bdo, br, img, map, object, q, script, span, sub, sup
  • button, input, label, select, textarea

塊級元素：

  • div,p,h1,h2,h3,h4,h5,h6
  • address,article, aside, section,audio,video
  • canvas, dd,dl,fieldset,figcaption, figure,
  • header, footer,hgroup, hr,noscript,ol,ul, table,form
  • blockquote,output,pre

除了行內元素和塊級元素外，還有一些特殊的型別比如list-item、inline-block、table、flex等，具體可檢視css屬性display的取值。

區別

  • 內容
    • 一般情況下，行內元素只能包含資料和其他行內元素
    • 而塊級元素可以包含行內元素和其他塊級元素
  • 格式
    • 行內元素不會以新行開始且預設以內容填充撐起寬度
    • 而塊級元素會新起並佔滿一行，不論內容多少
  • 盒模型
    • 理論上，行內元素不可設定寬高、內邊距、外邊距、邊框，強行設定會有意向不到的結果
    • 塊級元素具有盒模型的正常屬性，寬高、內外邊距都可設定

對於標籤巢狀規則，不能僅依據塊級元素可以包含行內元素和其他塊級元素，行內元素只能包含資料和其他行內元素。因為在HTML5 中有了新的概念，具體可檢視MDN關於內容類別的介紹 Content categories。

盒模型

  • 內聯元素設定內外邊距、寬高及邊框屬性
<div class="wrap">
    <span>
        這是一個行內元素，寬（100px）、高（100px）、margin（100px）、padding（100px）、border（10px）
    </span>
</div>
複製程式碼

塊級元素和行內元素

可見，行內元素的width和height設定無效，margin、padding、border設定出現異常

  • 塊級元素設定內外邊距、寬高及邊框屬性
<div class="wrap">
    <p>這是一個塊級元素，寬（100px）、高（100px）、margin（100px）、padding（100px）、border（10px）</p>
</div>
複製程式碼

塊級元素和行內元素

可見，塊級元素的盒模型相關屬性正常

相關文章