display: block
不論前後元素為何，display:block 元素會直接「換行」開始。<div>、<p>、<h1>、<h2>、<iframe>、<img>這幾個 HTML 元素預設的 display 屬性是 block
可以自定義寬高或縮排(margin 、 padding 、 width 、 height 、 background-image 皆「有效」)
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: inline-block
內部元素水平排列，而且不需要額外設定clear，也不會讓接著的元素疊上來。
可以理解為：外面是inline，裡面是block。所以元素「不會換行」，但是又可以設定元素的padding-top 、 padding-bottom 、 width 、 height 、 background-image 。
display: none
display設為none這個東西就不見了，不佔空間。
補充：visibility:hidden是隱形看不見，不過還是有佔空間