先來看問題吝梅。很多時候當我們給一組塊級元素設置display:inline-block樣式的時候會發(fā)現每個塊級元素之間有空隙员咽。
inline-block元素之間的空隙
這組空隙到底是哪兒來的根暑？為了防止誤解我先貼出代碼：
.inline-block {
display: inline-block;
margin: 0;
width: 40px;
height: 20px;
color: white;
background-color: darkcyan;
text-align: center;
}
<div class="inline-block">1</div>
<div class="inline-block">2</div>
<div class="inline-block">3</div>
<div class="inline-block">4</div>
可以看出在css樣式設置中并沒有設置元素間的空隙力试。
我們稍作改變
.inline-block {
display: inline-block;
margin: 0;
width: 40px;
height: 20px;
color: white;
background-color: darkcyan;
text-align: center;
}
<div class="inline-block">1</div><div class="inline-block">2</div><div class="inline-block">3</div><div class="inline-block">4</div>
再看效果：
同樣設置inline-block，縫隙沒了
神奇的事情發(fā)生了购裙，縫隙沒了懂版！
好了鹃栽，先作一個不是很科學的總結躏率，空隙主要是“換行”背鍋，那就想幾個辦法“消除換行”民鼓。
- 寫成如下樣式
<div></div
><div></div
><div></div>
- 寫在一行上
<div></div><div></div><div></div>
- 把中間的內容注釋掉
<div></div><!--
--><div></div><!--
--><div></div>
再來幾個復雜點的辦法：
- 在父元素上設置空隙處字體大小
font-size:0 - 使用負
margin - 看起來非主流的辦法,無閉合標簽
<div>
<div>
<div>
<div></div>
以上方法足夠對付這個小bug了薇芝。那么這個bug究竟是怎么產生的呢？
上面已經說的很清楚了丰嘉，這是“換行”或者“空格”在背鍋夯到。其實我們打“空格”或者“回車”換行都相當于鍵入了空白字符。想一下饮亏，我們在html中打一連串字然后突然“空格”一下是不是會有一個留白耍贾？好了，這樣小bug的原因也很清晰了路幸，以后遇到了就用上面的方法解決吧荐开。
