CSS 基礎系列 4 - Block & Inline

探索 HTML 元素的兩種主要顯示方式：block 和 inline。本文深入比較這兩者在顯示和佈局上的差異，並介紹如何透過 CSS 的 display 屬性進行設置。還將探討特殊的 inline-block 元素，結合了 block 和 inline 的特性，提供更多靈活的佈局選擇。

Block Element (區塊元素)

區塊元素的特色為

1. 透過 display: block; 進行設置，以下由範例會選一個預設就是區塊元素的 p tag 進行示範。
2. 佔滿整行，也就是說一個區塊級元素會從新的一行開始，如三個 p tag 會分別佔滿三行。

<p>我是第一行</p>
<p>我是第二行</p>
<p>我是第三行</p>

3. 我們也可以給予區塊級元素指定寬度，但他還是會佔滿整行，現實中常給予區塊級元素一個寬度並用 margin: 0 auto; 來進行水平置中。

<p style="width: 50px; background-color: #aaa; margin: 0 auto;">
  我是第一行
</p>

Inline Element (行內元素)

行內元素的特色為

1. 透過 display: inline; 進行設置，以下由範例會選一個預設就是行內元素的 span tag 進行示範。
2. 行內元素緊鄰著前後的元素

<span>我是第一個span</span>
<span>我是第二個span，我會緊跟著前面的元素喔！！</span>

3. 行內元素的寬度是根據他的內容決定
4. 行內元素的 width 及 height 是沒有效的

<span style="width: 100vw;">100vw span</span>
<span style="height: 100vh;">100vh span</span>

Inline Block Element

Inline Block 是一個特殊的存在，結合了上述兩者的一些特性，常常有一種情形是我們需要 行內元素的特性，又希望可以指定行內元素的寬高，因此 Inline Block 是非常好的一個解決方案。

1. 透過 display: inline-block; 進行設置。

<span style="width: 100%; background-color: #aaa; display: inline-block">
  100% span
</span>

參考文件

• MDN Block-level elements
• MDN Inline elements
• MDN CSS Display