CSS教學-Display屬性介紹| Inline vs Block
- 5 7 月, 2021 |
- 文章 | |
- No comments
最後更新日期: 2021-07-06
內容目錄
什麼是Display?
每一個HTML元件,都有預設的Display屬性。Display會影響網頁上的排版。所以要學會網頁排版,我們要了解基本的Display觀念,還有如何運用。雖然說Display屬性有很多種(flex, table, grid), 但是常見的還是inline 跟 block
Block (區塊元素) vs Inline (行內元素)
Inline 行內元素
- 元素寬度有它的內容決定,內容寬度多少,元素寬度的寬度就多少
- 不能調整 width, height
- Margin Top, Bottom 不適用
- Padding Top, Bottom 不適用
常見行內元素標籤:span、a、imput、img

以這個codepen例子,每個HTML元件的寬度都是自己內容的寬度,所以inline element
Block (區塊元素)
- 寬度佔整行
- 所有margin, padding 都適用
常見區塊元素標籤:div、ul li、p、h1

以這個codepen例子,每個HTML元件都是佔滿行不管內容寬度。所以Block 區塊會做到換行的動作
inline-block
- 保持行內元素
- 但是所有margin, padding 都適用
- 按鈕就很適合

以這個codepen例子,每個HTML元件的寬度都是自己內容的寬度,所以inline element
**所以如果有有預設display 不是你要的,你可以在CSS 自己改你要的Display屬性。
可以參考我的Codepen練習-連結
如何檢查目前的HTML元件Display屬性
那我要怎麼知道目前的HTML元件Display是什麼? 我又背不起來這麼多標籤。沒問題,我教你一招簡單的方法
1. 開啟開發者工具(Developer Tool)
- 在你的Chrome 遊覽器, 滑鼠按右鍵點選內容

2. 開啟開發者工具(Developer Tool)
- 在開發工具左邊, 上面標籤店Elements.
- 在左邊尋找你的HTML元件,以下面這個例子我們找到h3這個元件。
- 在右邊上方點選Computed, Computed 這裏會顯示這個元件所有的HTML屬性。
- 最後在輸入display 就找到 這個元件的display屬性

影片教學
課程
更多課程,請參考以下連結
我要學程式資源
Mozilla CSS Display- https://developer.mozilla.org/en-US/docs/Web/CSS/display
W3School CSS Display – https://www.w3schools.com/cssref/pr_class_display.asp