display:inline-block 既有行級元素的特性,也有塊級元素的特性,所以在同一行,能設置寬高,margin,padding
inline-block和float的區別
雖然設置float跟設置inline-block有些特徵相似,但二者的區別仍是很是明顯的:css
- 文檔流(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對此屬性部分支持。若是你要兼容這些瀏覽器,必須解決這個問題。這不是個大問題,但值得留意一下。
![顯示內聯浮點數的空白問題](http://static.javashuo.com/static/loading.gif)
解決空白問題html
- 刪除html中的空白:不要讓元素之間換行。
- 使用負邊距:你能夠用負邊距來補齊空白。
- 給父元素設置font-size:0:因爲空白的寬度與font-size有關係,設置這個屬性便可把空白的寬度設置爲0.在實際使用的時候,你還須要給子元素從新設置font-size。
何時使用inline-block,何時使用float
取決於你的設計稿跟解決方法。若是你須要文字環繞容器,那浮動是不二選擇。若是你須要居中對齊元素,inline-block是個好選擇。瀏覽器
![網格中的浮動塊](http://static.javashuo.com/static/loading.gif)
上圖,把一系列元素設置了浮動,由於盒子二號寬度的關係,能夠發現盒子五號被擠進去了(這些元素都脫離了文檔流),這是圖片排列中很常見的問題。spa
![網格中的內聯塊](http://static.javashuo.com/static/loading.gif)
上面的塊級元素被設置了inline-block。因爲他們沒有脫離文檔流,因此元素不會被某個過長的列擠上來。.net
原文: https://www.w3cplus.com/css/inline-blocks.html © w3cplus.com