基本概念

CSS的Display屬性可以改變元素對外所參與的佈局環境（outer display type），例如：

inline/block/inline-block/none

以下就針對這四種作介紹:

display：block

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

display：inline

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

display：inline-block

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

display: none

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