IE8以上都是可以正常使用的
inline-block的作用
- inline-block的元素可以同行顯示
- 寬高只占自身大小
- 可以設(shè)置寬高大小
- 可以設(shè)置上下左右的 margin晰甚、padding
小技巧：
有很多div并想讓他同行顯示的時(shí)候可以設(shè)置inline-block澳眷，跟float的效果差不多
為什么display:inline-block后會(huì)產(chǎn)生空隙肥印？
這么一個(gè)神奇的屬性，為何大家一直避而遠(yuǎn)之呢补履？這恐怕還得從 inline-block 元素之間產(chǎn)生的水平空隙（間隙）說(shuō)起吧。
參照 DEMO
現(xiàn)代瀏覽器中 inline 和 block 元素 display:inline-block 后均會(huì)產(chǎn)生水平空隙；
IE6走哺、7，IE8（Q）模擬 display:inline-block 后分兩種情況：
IE6哲虾、7丙躏，IE8（Q）中：inline 元素會(huì)產(chǎn)生空隙，block 元素不會(huì)產(chǎn)生空隙束凑。
看看 inline 元素默認(rèn)的表現(xiàn)情況如何晒旅？原來(lái)默認(rèn)就有空隙存在！它們是誰(shuí)汪诉？是空白符（white space）废恋！
W3C 9.1 White space 中規(guī)定以下元素屬于空白符（white space）：
ASCII 空格
ASCII 制表符
ASCII 換頁(yè)符
零寬度空格 「這個(gè)在閉合浮動(dòng)中也有運(yùn)用到」
9.3.2 Controlling line breaks 中進(jìn)一步闡述：
A line break is defined to be a carriage return (
), a line feed ( ), or a carriage return/line feed pair. All line breaks constitute white space.
For more information about SGML’s specification of line breaks, please consult the notes on line breaks > in the appendix.
折行被定義為一個(gè)回車(chē)符（
），一個(gè)換行符 line feed ( )扒寄，或者一個(gè)回車(chē)鱼鼓、換行的組合。所有的折行構(gòu)成了空白符该编。
有關(guān) SGML 規(guī)范中折行的更多信息迄本，請(qǐng)參閱附錄中關(guān)于折行的注釋。
通常情況下课竣，對(duì)于多個(gè)連續(xù)的空白符（空格嘉赎，換行符置媳，回車(chē)符等），瀏覽器會(huì)將他們合并為一個(gè)空白符公条。> CSS 中由 white-space 這個(gè)屬性來(lái)控制：
white-space：normal | pre | nowrap | pre-wrap | pre-line
默認(rèn)值：normal
normal：默認(rèn)處理方式拇囊。
pre：用等寬字體顯示預(yù)先格式化的文本，不合并文字間的空白距離靶橱，當(dāng)文字超出邊界時(shí)不換行寥袭。可查閱 > pre 對(duì)象
nowrap：強(qiáng)制在同一行內(nèi)顯示所有文本抓韩，直到文本結(jié)束或者遭遇 br 對(duì)象纠永。
pre-wrap：用等寬字體顯示預(yù)先格式化的文本，不合并文字間的空白距離谒拴，當(dāng)文字碰到邊界時(shí)發(fā)生換行尝江。
pre-line：保持文本的換行，不保留文字間的空白距離英上，當(dāng)文字碰到邊界時(shí)發(fā)生換行炭序。
注：IE7及更早瀏覽器不支持 CSS2.1 新增的 pre-wrap | pre-line。
所以這并不是 inline-block 后產(chǎn)生的 bug苍日，而是因?yàn)?inline-block 具有 inline 元素固有的特性惭聂。那么為何
IE6、7 block 元素沒(méi)有產(chǎn)生空隙呢相恃？其實(shí)前面也提到了 IE 的 hasLayout辜纲，具有獨(dú)立性，所以產(chǎn)生
hasLayout 的元素之間表現(xiàn)出來(lái)互不影響拦耐，這也再次表明 IE6耕腾、7 中的 inline-block 不能等同于 CSS2.1
中的 inline-block。如果非要說(shuō)是有 bug杀糯， IE6扫俺、7 block 元素 inline-block 后不產(chǎn)生空隙才是 bug。
測(cè)試表明刪除換行符后固翰，inline 元素間的空隙就「消失」了：
怎么消除這個(gè)空隙呢狼纬？
- 方法一：把設(shè)置了inline-block元素的HTML代碼前的空格刪除
- 方法二： 將設(shè)置了inline-block元素的HTML代碼>符號(hào)換行
- 方法三：將設(shè)置了inline-block元素的父元素設(shè)置font-size:0;然后在給設(shè)置了inline-block的元素重新設(shè)置一個(gè)font-size
可能還有別的更好的方法，但這三種是筆者覺(jué)得最實(shí)用的三種
高度不一樣的inline-block元素如何頂端對(duì)齊
設(shè)置display:inline-block的時(shí)候可能會(huì)出現(xiàn)這種情況
這是因?yàn)関ertical-align的默認(rèn)搞的鬼骂际。
小技巧
我們可以給這個(gè)元素設(shè)置vertical-align:top
