display 屬性 (block & inline) | CSS

CSS display 屬性基本上分為兩個值： block 和 inline ，賦予開發人員控制HTML元素佈局和呈現的能力。

See the Pen display 屬性 (block & inline) | CSS by lenrich (@lenrich) on CodePen.

CSS display 屬性概述:

display 屬性是定義元素佈局行為的基礎。它決定元素與周圍元素的交互方式以及元素在文檔流中的佔用空間。兩個主要的值，block 和 inline，提供了不同的佈局特性。

塊級元素(block):

具有 display: block 樣式的元素天然開始於新行，並且佔據其父容器的整個寬度。例如標題（ 到 ）、段落（）和區塊元素（）。區塊級元素創建清晰的視覺分隔，非常適用於文檔中的結構元素。

.block-element {
  display: block;
  width: 100%;
  background-color: #f2f2f2;
  padding: 10px;
  margin-bottom: 10px;
}

內聯元素(inliine):

相反，具有 display: inline 樣式的元素與相鄰元素共用同一行，並且僅佔據必要的寬度。常見的例子包括行內元素（）、鏈接（）和強調標籤（/）。行內級元素適用於在一行文本內流動的元素。

.inline-element {
  display: inline;
  background-color: #e6f7ff;
  padding: 5px;
  margin-right: 10px;
}