display:inline-block 既有行級元素的特性，也有塊級元素的特性，因此在同一行，能設置寬高，margin，padding
inline-block和float的區別
雖然設置float跟設置inline-block有些特征類似，但兩者的區別還是非常明顯的:
- 文檔流（Document flow）:float元素會脫離文檔流，並使得周圍元素環繞這個元素。而inline-block元素仍在文檔流內。因此設置inline-block不需要清除浮動。當然，周圍元素不會環繞這個元素，你也不可能通過清除inline-block就讓一個元素跑到下面去。
- 水平位置（Horizontal position）：很明顯你不能通過給父元素設置text-align:center讓浮動元素居中。事實上定位類屬性設置到父元素上，均不會影響父元素內浮動的元素。但是父元素內元素如果設置了display：inline-block，則對父元素設置一些定位屬性會影響到子元素。（這還是因為浮動元素脫離文檔流的關系）。
- 垂直對齊（Vertical alignment）：inline-block元素沿着默認的基線對齊。浮動元素緊貼頂部。你可以通過vertical屬性設置這個默認基線，但對浮動元素這種方法就不行了。這也是我傾向於inline-block的主要原因。
- 空白（Whitespace）：inline-block包含html空白節點。如果你的html中一系列元素每個元素之間都換行了，當你對這些元素設置inline-block時，這些元素之間就會出現空白。而浮動元素會忽略空白節點，互相緊貼
- IE6和IE7：Ie67對此屬性部分支持。如果你要兼容這些瀏覽器，必須解決這個問題。這不是個大問題，但值得留意一下。
解決空白問題
- 刪除html中的空白：不要讓元素之間換行。
- 使用負邊距：你可以用負邊距來補齊空白。
- 給父元素設置font-size:0：由於空白的寬度與font-size有關系，設置這個屬性即可把空白的寬度設置為0.在實際使用的時候，你還需要給子元素重新設置font-size。
什么時候使用inline-block，什么時候使用float
取決於你的設計稿跟解決方法。如果你需要文字環繞容器，那浮動是不二選擇。如果你需要居中對齊元素，inline-block是個好選擇。
上圖，把一系列元素設置了浮動，因為盒子二號寬度的關系，可以發現盒子五號被擠進去了（這些元素都脫離了文檔流），這是圖片排列中很常見的問題。
上面的塊級元素被設置了inline-block。由於他們沒有脫離文檔流，所以元素不會被某個過長的列擠上來。
原文: https://www.w3cplus.com/css/inline-blocks.html © w3cplus.com