CSS Display

每個 HTML 元素都有一個預設的 display 值，在一開始介紹 CSS 的時候有跟各位提到了 inline element 與 block element。

也就是經常聽到的行內元素與區塊元素。

block

區塊元素內容會撐滿容器。常見的元素有 div, p, form, header, footer, section 等。

inline

行內元素無法指定寬高，會依據內容去長。常見的就有 span, label, input, strong, em 等。

none

會將元素隱藏但是不會保留原本該顯示的空間，與之相對的 visibility: hidden; 會讓元素的內容隱藏，但會保留內容的空間。

inline-block

CSS2.1 新的值，定義為行內區塊元素。

它解決了 float 排版的問題，但也卻衍生出其他問題。

• 須設定寬度
• 注意 HTML 元素之間的空白字元會產生間隔
• vertical-align 對它是有影響的

其他

還有一些比較不常出現的值可以在 MDN 表內找到。