---
# System prepended metadata

title: CSS Display
tags: ['HTML, CSS']

---

# CSS Display

###### tags: `HTML, CSS`


## display: block

* block 屬性會占滿 100% width ，讓整行只有自己
* 可以設置 width, height

如同下方的紅色跟綠色格子

![](https://i.imgur.com/mMdzlID.png)


## display: inline

* `<span>` 的預設值就是 inline 屬性
* 它的特性是只會佔據最小的空間並且會緊鄰其他元素
* 無法設置 width, height

可以參考下圖藍色跟紫色的部分

![](https://i.imgur.com/umMfrYl.png)


## display: inline-block

* 跟 inline 的屬性特性差不多
* 但是可以對它設置 width, height

如下圖照片的部分

![](https://i.imgur.com/jdxq3IX.png)


## display: none

* 這個屬性非常直觀，當設定為 none 時會讓該元素消失(直接不存在而不是變透明喔！)


## display: flex

屬性比較複雜需要用比較大的篇幅介紹

## display: grid

屬性比較複雜需要用比較大的篇幅介紹