# [CSS] Display屬性
###### tags: `HTML/CSS`
>文章內容皆來自網路及課程，僅做個人筆記用途

| display屬性 | 說明 |
| -------- | -------- |
| block | 元素以區塊呈現，元素的寬與父層同寬，有高的屬性 |
| inline | 並排顯示，無法設定寬高、上下外距等屬性 |
| inline-block | inline的排列方式，但可設定寬高 |
| none | 使其無法顯示在網頁上 |

| 屬性 | block | inline | inline-block(橫排的block |
| ------------ | ----- | ---------- | ------------------------ |
| width&height | O | X | O |
| margin上下 | O | X | O |
| margin左右 | O | O | O |
| padding上下 | 當作沒作用 | O | O |
| padding左右 | O | O | O |
| 預設排列方向 | 橫排 | 直排 | 橫排 |
| 預設寬度 | 由內容決定 | 預設滿版寬(width:auto) | 由內容決定 |
| 空白字元的影響 | 保留空白 | 無此問題 | 保留空白 |
| 垂直對其支援性(vertical-align)| 有效 | 無效 | 有效 |