編輯嚴選

【CSS 教學】inline、block、inline-block 使用時機講解

初期在撰寫 HTML、CSS 時，可能會發現有一些莫名其妙的排版狀況會出現：

明明想要某個欄位的寬高為 200px，卻發現自己不知道為什麼怎麼更改都會改不動，又或者寬高更改了，卻沒有辦法與其他元素並列。

上述的狀況，通常都是在不熟悉 HTML display 特性而產生的狀況下才會出現，今天就來跟大家分享，關於 HTML 元素各自的預設的 display 特性，及該在什麼樣的場合下來使用 display:inline、block、inline-block。

簡單來說，我們常見的網頁元素通常會帶有預設的 display 屬性，預設的 display 會決定 HTML 會如何在網頁中排列，預設的屬性大致分為三種：block、inline、inline-block 等：

帶有 display:block 屬性的元素，像是 <div>、 <h1>、<p> 等，在不更改 display 的狀態下，會在容器中呈現滿版，並且可以透過 width、height、max-width、max-height 等 CSS 屬性來更改該元素的寬高。

在使用區塊元素時，可能會有一個誤區需要注意：帶有 display:block 屬性的元素即便更改了寬度，剩餘的空間依然還是會在網頁上佔有空間，後續的元素並不會因為寬度縮小了，而向上並排。

帶有 display:inline 屬性的元素，像是<a>、<img>、<span> 等， 會依照元素中的內容來決定內容的寬高，不會佔滿容器橫向的剩餘空間，在不超過容器的狀況下，可以與其他元素並列。

與帶有 display:block 屬性的元素不同，並不能透過 width、height、max-width、max-height 等 CSS 屬性來更改該元素的寬高。

在範例中可以看到，如果我們將 <div> 元素改為 display:inline，原本的寬高設定不僅會失效，也會額外產生並列的效果。

在開發上時，display:inline 屬性有時會顯得很雞肋，因為在大部分的狀態下，畫面上的文字內容並不是固定字數的，我們並不能預期畫面呈現的內容是否能如同我們所預期寬高一樣。

常見的 HTML 元素在預設的情況下，不會帶有 display:inline-block 屬性，通常都是在有需求時，我們會將特定元素的 display 值設為 inline-block。

帶有 display:inline-block 屬性的元素會依照會依照元素中的內容來決定內容的寬高，不會佔滿容器橫向的剩餘空間，還可以額外透過 width、height、max-width、max-height 等 CSS 屬性來更改該元素的寬高。

在範例中可以看到，如果我們將 <div> 元素改為 display:inline-block，原本的寬高設定不僅不會失效，原本在 block 會換行的問題也解決了，讓兩個元素可以在能更改寬高的狀態下，也能並列。

display: inline-block 可以說是集 block 與 inline 的優點為一身，通常會應用在 a 連結上，讓原本不能更改寬高的 <a> 標籤，不僅能依照文字內容自適應大小，也能依照網頁需求，透過 padding 屬性增加點擊範圍、自訂寬高。

如果你對於 HTML、CSS 更改樣式的方式不太熟悉的話，可以參考此篇文章：

希望今天的文章有幫助到正在閱讀的你，如果你喜歡我的文章的話，可以留下你的愛心或是收藏我的文章，也或者可以點選「贊助」，你的一杯咖啡絕對是我持續寫下去的動力！或是透過拍拍手，用你小小的行動支持我的創作！

我是Vivian，我們下次見。