CSS-常見display屬性的值

display: none

• display設為none這個東西就不見了，不佔空間。
• 補充：visibility:hidden是隱形看不見，不過還是有佔空間。

display: inline

• display : inline 的元素連在一起會在同一行，「不會換行」。
• 要讓 display : inline 元素水平置中的方式是在此元素的父元素加上 text-align : center。
• <a>、<span>、<b>、<i>、<iframe>、<img>這幾個 HTML 元素預設的 display 屬性是 inline
• 可以針對左右做縮排(margin-left 、 margin-right 、 padding-left 、 padding-right「有效」)
• 上下縮排會失效，且寬高為內容本身寬高，無法自定義寬高。 (margin-top 、 margin-bottom 、 padding-top 、 padding-bottom 、 width 、 height 、 background-image 皆「無效」)

display: block

• 不論前後元素為何，display:block 元素會直接「換行」開始。
• <div>、<p>、<h1>、<h2>、<iframe>、<img>這幾個 HTML 元素預設的 display 屬性是 block
• 可以自定義寬高或縮排(margin 、 padding 、 width 、 height 、 background-image 皆「有效」)

display: inline-block

• 內部元素水平排列，而且不需要額外設定clear，也不會讓接著的元素疊上來。
• 可以理解為：外面是inline，裡面是block。所以元素「不會換行」，但是又可以設定元素的padding-top 、 padding-bottom 、 width 、 height 、 background-image 。