說inline-block(行內區塊元素)之前，先說下他另外的2個兄弟
display:inline; 內聯元素，簡單來說就是在同一行顯示。他沒有高度，給內聯元素設置width和height是沒效果的。
display:block; 塊級元素，簡單來說就是就是有換行，會換到第二行。同時可以設置寬高。
inline-block詳解
inline-block 的元素既具有 block 元素可以設置寬高的特性，同時又具有 inline 元素默認不換行的特性。當然不僅僅是這些特性，比如 inline-block 元素也可以設置 vertical-align（因為這個垂直對齊屬性只對設置了inline-block的元素有效） 屬性。
HTML 中的換行符、空格符、制表符等合並為空白符，字體大小不為 0 的情況下，空白符自然占據一定的寬度，使用inline-block 會產生了元素間的空隙。（這句話下面會用例子解釋）
還是似懂非懂嗎，來看下例子吧，保證就懂了
詳細應用
我在了解inline-block之前,我的導航欄一直采用float浮動來達到橫向排列的目的，然而浮動是會產生副作用的，需要清除浮動,相對變得麻煩了。使用inline-block將會變得很方便
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width: 100%; background: yellow; height: 100px; text-align: center; line-height: 100px; } a{ color:#fff; text-decoration: none; display: inline-block; width: 100px; height: 30px; line-height: 30px; background: red; } </style> </head> <body> <div> <a href="">我是a1</a> <a href="">我是a2</a> <a href="">我是a3</a> <a href="">我是a4</a> </div> </body> </html>
效果
有沒有發現，每個a之間都會有一個空隙，這個空隙是因為塊級元素會換行，就有換行，.HTML 中的換行符、空格符、制表符等合並為空白符.所以換行符會占據寬度,產生間隙
如何取消inline-block產生的間隙
我認為有2種方法
第一種
使用負值的margin各個瀏覽器的負值也不相同，才能完美貼合
| 瀏覽器 | margin值(左右) |
| 火狐 | margin:-4px |
| chrome | margin:-3px |
| IE | margin:-2px |
第二種
在父元素的css中設置word-spacing負值
| 瀏覽器 | word-spacing |
| 火狐 | word-spacing:-8px |
| chrome | word-spacing:-6px |
| IE | word-spacing:-4px |
效果
兼容性
很遺憾，IE7以下的瀏覽器不支持inline-block，但並非完全不支持
解決IE6、IE7兼容性的方法：
1、首先設置inline-block觸發塊元素，具有了layout的特性，然后設置display:inline使塊元素呈現內聯元素，此時layout的特性不會消失。
2、直接設置display:inline，使用zoom:1觸發layout。
兼容所有瀏覽器的方法是：
display:inline-block;
*display:inline;
*zoom:1;
兼容性解決方法參考自charling：inline-block的兼容性問題