Morty's Blog | Web developer

CSS 基礎系列 4 - Block & Inline

CSS 基礎系列 4 - Block & Inline

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

Block Element (區塊元素)

區塊元素的特色為

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

我是第一行

我是第二行

我是第三行

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

我是第一行

Inline Element (行內元素)

行內元素的特色為

  1. 透過 display: inline; 進行設置,以下由範例會選一個預設就是行內元素的 span tag 進行示範。
  2. 行內元素緊鄰著前後的元素
我是第一個 span我是第二個 span,我會緊跟著前面的元素喔!!
  1. 行內元素的寬度是根據他的內容決定
  2. 行內元素的 widthheight 是沒有效的
100vw span100vh span

Inline Block Element

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

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

100% span

參考文件