CSS教學-Display屬性介紹| Inline vs Block
- 5 7 月, 2021 |
- 文章 | |
- No comments
什麼是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
