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

display:inline、block、inline-block 到底差在哪？

1. display:block：

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

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

20210907-block element

Add External Stylesheets/Pens Any URL's added here will be added as s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing. JavaScript Preprocessor Babel includes JSX processing.

2. display:inline：

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

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

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

20210907-inline element

Add External Stylesheets/Pens Any URL's added here will be added as s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing. JavaScript Preprocessor Babel includes JSX processing.

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

3. display: inline-block：

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

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

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

20210907-inline-block element

Add External Stylesheets/Pens Any URL's added here will be added as s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing. JavaScript Preprocessor Babel includes JSX processing.

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

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

【自學程式】什麼是CSS選擇器? 學習如何改變網頁內容的樣式 | Vivian Yeh - vocus

與HTML不同，CSS是專門修改網頁內容「樣式」的程式語言，也就是說你沒有辦法透過CSS去新增網頁的文字或是圖片等相關的內容，但你可以透過HTML新增網頁內容後，再使用CSS去修改他的樣式，例如⋯⋯ CSS

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

我是Vivian，我們下次見。