CSS Display Block VS Inline

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)

  1. 在開發工具左邊, 上面標籤店Elements.
  2. 在左邊尋找你的HTML元件,以下面這個例子我們找到h3這個元件。
  3. 在右邊上方點選Computed, Computed 這裏會顯示這個元件所有的HTML屬性。
  4. 最後在輸入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


關於作者:Danny Huang

大家好,我是Danny,是位熱愛程式的前端工程師,具有豐富工作與接案經驗。我在這裡會陸續推出一些網頁開發,線上行銷的文章。 如果喜歡這方面的文章可以加入email list。

2018 © Copyright 鎰誠 All rights Reserved.