Inline-block 是元素 display屬性的一個值 。這個名字的由來是因為，可以簡單的解釋為inline+block ；display設置這個值的元素，兼具行內元素（ inline elements）跟塊級元素（block elements）的特征。 塊級元素（block elements） 來源于 CSS盒子模型 。塊級元素包含width height,padding,border與margin，他們的排列方式是從上到下排列。 行內元素（inline elements） 排列方式是水平排列。 行內塊元素（inline-block elements） 在內部他的表現類似 block元素 ，比如他擁有block元素的width height,padding,border與margin，而外部的排列方式有類似行內元素，即水平排列，而不是像塊級元素一樣從上到下 排列 。因此 inline-block元素跟元素設置浮動后的表現差別并不是很大。對盒子設置浮動后，同樣會水平排列。雖然他們實現的原理不同，但內部表現為塊級元素，水平排列這種需求，浮動跟inline-block都適合實現。

如何從兩者之間進行選擇取決于你的設計稿跟解決方法。如果你需要文字環繞容器，那浮動是不二選擇。因為浮動元素會脫離文檔流，并使得周圍元素環繞這個元素。而inline-block元素仍在文檔流內；如果你需要居中對齊元素，inline-block是個好選擇，很明顯你不能通過給父元素設置text-align:center讓浮動元素居中。事實上定位類屬性設置到父元素上，均不會影響父元素內浮動的元素。但是父元素內元素如果設置了display：inline-block，則對父元素設置一些定位屬性會影響到子元素。

使用inline-block：當你需要控制元素的垂直對齊跟水平排列時，使用inline-block。
使用浮動：當你需要讓元素環繞某一個元素時，或者需要支持舊版本ie，或者不想處理inline-block帶來的空白問題時，使用浮動。

對于圖片列表來說。若父元素中的圖片等高，設置浮動就會工作正常。但一旦有一列圖片比較高時，圖片的排列就會出現問題。這是因為浮動后，圖片脫離了文檔流。而inline-block由于未脫離文檔流，不會出現這個問題。如果你想再創建一列圖片時，不會受到上一列圖片inline:block的影響，因此也不需要清除浮動。而你在使用附送時則需要時刻注意清除浮動，當內容不斷變化時這很容易產生bug。

對比如下：

上圖，把一系列元素設置了浮動，因為盒子二號寬度的關系，可以發現盒子五號被擠進去了（這些元素都脫離了文檔流），這是圖片排列中很常見的問題。

上面的塊級元素被設置了inline-block。由于他們沒有脫離文檔流，所以元素不會被某個過長的列擠上來。

總結

以上是生活随笔為你收集整理的CSS——inline-block属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。