display:inline-block 元素之間空隙的產(chǎn)生原因和解決辦法
原因
元素被當成行內(nèi)元素排版的時候睬关，元素之間的空白符（空格、回車換行等）都會被瀏覽器處理倾哺，根據(jù) white-space 的處理方式（默認是 normal妙痹，合并多余空白），原來 HTML 代碼中的回車換行被轉(zhuǎn)成一個空白符授滓，在字體不為 0 的情況下，空白符占據(jù)一定寬度肆糕，所以 inline-block 的元素之間就出現(xiàn)了空隙般堆。這些元素之間的間距會隨著字體的大小而變化，當行內(nèi)元素 font-size:16px 時诚啃，間距為 8px淮摔。
嘗試 1: 解決元素之間的空白符
<!-- 將所有子元素寫在同一行 -->
<div class="parent">
<div class="child">child1</div><div class="child">child2</div>
</div>
分析: 代碼風(fēng)格一保存立馬換行, 不可行
嘗試 2: 父元素中設(shè)置 font-size: 0，子元素上重置正確的 font-size
<div class="parent" style="font-size: 0px">
<div class="child" style="font-size: 16px">child1</div>
<div class="child" style="font-size: 16px">child2</div>
</div>
分析: inline-block 必須設(shè)置字體, 不然不顯示, 還增加了代碼量, 不可行
嘗試 3: inline-block 元素添加樣式 float:left
分析: 用 float 可能有高度塌陷問題
嘗試 4: 子元素 margin 值為負數(shù)
.parent .child {
margin-left: -2px
}
分析: 間距與字體大小有關(guān), 不同瀏覽器下間距也不同, 不可行
最優(yōu)解始赎，設(shè)置父元素和橙，display:table 和 word-spacing
.parent{
display: table;
word-spacing:-1em; /_兼容其他瀏覽器_/
}
```
