首先，來看下具體的問題，下面是用inline-block布局實現的兩邊固定寬度，中間自適應的html代碼：
|
1
2
3
4
5
6
7
8
9
|
<section class="layout inline-block">
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>inline-block布局-中間自適應</h1>
</div>
<div class="right"></div>
</article>
</section>
|
inline-block布局實現三欄式的css代碼css樣式部分：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
.layout article div {
min-height: 200px;
box-sizing: border-box;
padding: 20px;
}
.layout.inline-block .left-center-right>div {
display: inline-block;
vertical-align: top;
}
.layout.inline-block .left {
width: 300px;
background: #eee;
}
.layout.inline-block .center {
width: calc(100% - 300px - 300px);
background: #ddd;
}
.layout.inline-block .right {
width: 300px;
background: #eee;
}
|
實際效果如圖所示：
出現空白間隙的原因是，元素被當成行內元素排版的時候，元素之間的空白符（空格、回車換行等）都會被瀏覽器處理，根據white-space的處理方式（默認是normal，合並多余空白），原來HTML代碼中的回車換行被轉成一個空白符，所以元素之間就出現了空隙。這些元素之間的間距會隨着字體的大小而變化，當行內元素font-size:16px時，間距為8px。
那么去除空白間隙有哪些方法呢，下面列舉幾個不限於inline-block用於布局場景的解決方法~
一、去除元素間的空白
通過將上一個元素的閉合標簽與下一個元素的開始標簽寫在同一行，可以去除元素間的空白，或者將兩個inline-block元素間加上空白注釋，或者不寫元素的閉合標簽等，例如這么寫：
|
1
2
3
4
5
6
7
8
9
10
11
|
<ul>
<li>one</li
><li>two</li
><li>three</li>
</ul>
<!-- or -->
<ul>
<li>one</li><!--
--><li>two</li><!--
--><li>three</li>
</ul>
|
二、父元素設置font-size為0，子元素單獨再設置字體大小
如下所示：
|
1
2
3
4
5
6
|
.layout.inline-block .left-center-right {
font-size: 0;
}
.layout.inline-block .left-center-right>div {
font-size: 16px;
}
|
三、設置margin-right為負值
用margin負值來抵掉元素間的空白，不過margin負值的大小與上下文的字體和文字大小相關，並且同一大小的字體，元素之間的間距在不同瀏覽器下是不一樣的，如：font-size:16px時，Chrome下元素之間的間距為8px,而Firefox下元素之間的間距為4px。所以這個方法並不通用，也相對比較麻煩，因此不太推薦使用。
四、給inline-block元素加float或者flex
讓行內塊元素浮動起來，或者給父盒子加上display: flex; 都可以解決空白間隙的問題，不過這樣處理的三欄式布局也就沒必要用inline-block啦。
五、設置字符間距或單詞間距
這兩個方法的原理有點像二所用的font-size，具體做法是給父元素一個letter-spacing或者word-spacing的負值，子元素再調整為0即可，具體使用字符間距還是單詞間距其實大同小異。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
/* letter-spacing */
.layout .left-center-right{
letter-spacing: -0.5em;
}
.layout .left-center-right>div{
letter-spacing: 0;
}
/* word-spacing */
.layout .left-center-right{
word-spacing: -0.5em;
}
.layout .left-center-right>div{
word-spacing: 0;
}
|
emmm方法都列舉得差不多啦，根據這些方法試試，就能得到想要的效果啦
原文來自：http://www.lingwuya.com/2018/03/16/%E8%A1%8C%E5%86%85%E5%9D%97inline-block%E5%85%83%E7%B4%A0%E4%B9%8B%E9%97%B4%E5%87%BA%E7%8E%B0%E7%A9%BA%E7%99%BD%E9%97%B4%E9%9A%99%E5%8E%9F%E5%9B%A0%E5%8F%8A%E8%A7%A3%E5%86%B3%E5%8A%9E%E6%B3%95/