display 屬性中常用的類別

Sandy

Published in

UI/UX練功坊

8 min readDec 14, 2018

介紹常用到的 display 種類分別有什麼特徵

還記得剛開始寫css的時候
還沒弄清楚 float 和 display 的特性就在用了…
結果當然是常常切出來的畫面不如預期效果(挫折😂😂😂)&亂解

充分理解 css 屬性的特徵是很重要的，才能在運用時判斷正確
以下分別列出常用的種類之特徵，並以 CodePen 測試實際的狀況：

display: block

● 可以指定寬度(width) 和高度(height)
● 可以設定上下左右外距(margin)
● 可以設定上下左右內距(padding)
● 元素會由上而下「自動換行配置」(若有另外設定 float 或 position 時例外)
● 無法設定垂直對齊(vertical-align)屬性，元素內容(文字)會永遠靠上對齊。但可以藉由 line-height 屬性解決文字內容垂直置中對齊的問題。
● 預設為此屬性的是區塊類型元素：div、ul、dl、p、h1~h6 …等

.block {
  display: block;
  background-color: #f47721;
  width: 300px;
  height: 50px;
  margin: 30px;
  padding: 15px;
  vertical-align: middle; /*指定無效*/
  line-height: 50px; /*解決垂直置中對齊的辦法*/
  text-align: center;
}

display: inline

● 「無法」指定寬度(width)和高度(height)，尺寸非固定會受 padding 值的影響
● 只能設定左右外距(margin-left & margin-right)，「無法設定上下外距(margin-top & margin-bottom)」
● 可以設定上下左右內距(padding)
● 元素「不會自動換行配置」，只要沒有使用 br 元素強制換行，會在同一列一直顯示至空間不足才會換到下一行
● 相鄰的文字(同一列中)和 inline 元素之間可以垂直置中對齊
● 再搭配設定行高(line-height)的情況下，可以指定與相鄰文字的垂直對齊(vertical-align)方式(※但不包括自身文字內容)
● 預設為此屬性的是文字類型元素：span、a、strong、small …等

.inline {
  display: inline;
  background-color: #7ac143;
  width: 300px; /*指定無效*/
  height: 150px; /*指定無效*/
  margin: 15px; /*只有左右有效，上下指定無效*/
  padding: 30px 15px;
}

四邊都設定了 margin 也只會產生水平的推移(左右)，上下的外距不會改變，但 padding 值會保留

.inline {
  display: inline;
  background-color: #7ac143;
  margin: 15px; /*只有左右有效，上下指定無效*/
  padding: 30px 15px;
  line-height: 90px;
  vertical-align: top;
}

搭配行高把間距撐開，就可以設定垂直對齊方式( vertical-align: top; )

display: inline-block
( 與 inline 一樣不會自動換行，但卻是以 block 元素盒子的方式顯示 )

● 可以指定寬度(width) 和高度(height)
● 可以設定上下左右外距(margin)
● 可以設定上下左右內距(padding)
● 元素「不會自動換行配置」，只要沒有使用 br 元素強制換行，會在同一列一直顯示至空間不足才會換到下一行
● 可在父元素設定 text-align 屬性，能指定區塊在父元素中的水平對齊方式
● 可以設定垂直對齊(vertical-align)屬性，指定垂直對齊的方式
● 預設為此屬性的類型元素有：img、input、select、button …等

.container {
  text-align: right; /*區塊在父元素中水平對齊的方式：左、中、右*/
}.inline-block {
  display: inline-block;
  background-color: #00bce4;
  width: 90px;
  margin: 30px;
  padding: 15px;
  text-align: right; /*元素本身文字內容的水平對齊方式：左、中、右*/
  vertical-align: middle; /*區塊之間的垂直對齊方式：上、中、下*/
}

display: table-cell

● 與 table 元素中的 th、td 顯示方式相同，可以解決 float 版面無法垂直對齊及無法設定高度一致的缺點，是比較早期 RWD 常見的做法(現在有 flex 可以用)。
● 若搭配將父元素屬性設定為 display: table，則可以將 table-cell 的寬度依據內容自動調適(與表格原理相同)
● 設定了 table-cell 的元素與表格儲存格一樣，會顯示在同一列
● 若沒有指定高度(或指定高度小於內容高度)，元素的高度會自動調整為與高度最大者相同(與表格原理相同)
● 可以設定垂直對齊(vertical-align)屬性，可以設定垂直對齊方式(上/中/下)

.table {
  display: table;
  margin: 30px;
}.table-cell {
  display: table-cell;
  background-color: #ffffce;
  border: 1px solid #999;
  padding: 15px;
  margin: 15px; /*指定無效*/
  width: 25%;
  vertical-align: middle;
}

display: none

● 該元素將「隱藏不顯示」
● 該元素被視為不存在，不會在畫面上佔有空間，後續元素會自動遞補上

.none {
  display: none;
}

display: list-item
( 以 block 元素盒子的方式配置，但以條列式項目方式顯示，和 li 一樣 )

● 可以指定寬度(width) 和高度(height)
● 可以設定上下左右內距(padding)
● 可以設定上下左右外距(margin)
● 元素會由上而下「自動換行配置」
● 無法設定垂直對齊(vertical-align)屬性，元素內容(文字)會永遠靠上對齊。但可以藉由 line-height 屬性解決文字內容垂直置中對齊的問題。
● 可以搭配其他 list 的屬性(ex. list-style)自訂想要的條列項目樣式

.list-item {
  display: list-item;
  background: #f1f1f1;
  width: 120px;
  height: 50px;
  padding: 20px;
  margin: 10px;
  list-style: circle;
  vertical-align: middle; /*指定無效*/
  line-height: 50px;
}

→ 查看以上的範例Demo

總結：將以上提到的 display 屬性特徵整理如下表：

inline屬性 → 可以與其他元素排成同一列
block屬性 → 可以設置寬高尺寸
inline-block → 既可以與其他元素排成同一列又可以設置寬高尺寸

在製作水平排列選單( nav )時，若不需要指定尺寸可用 display: inline;，若需要指定尺寸用 display: block; 搭配 float: left; 會比較方便

display 屬性中常用的類別

Written by Sandy