使用font-size:0解決設置inline-block引起的空白間隙問題
一、空白間隙問題
在進行頁面布局的時候為了頁面代碼所謂整潔刻度，往往會設置縮進或是換行，但是元素display為inline-block或是inline時，行內元素雖然沒有設置 margin值，這些換行或是縮進。還是會出現空白間隙。
如下所示：
HTML部分
<div id="box1">1</div> <div id="box2">2</div> <div id="box3">3</div>
CSS部分
#box2{ width:240px; height:240px; background-color:#aaf; display:inline-block; } #box1{ width:240px; height:60px; background-color: #eef; } #box3{ width:60px; height:240px; background: #ddf; display:inline-block; }
由於排版原因，雖然沒有設置 margin ，兩個div之間還是出現了空白間隙。這是由於排版換行的原因兩個div之間才留下了空白字符，導致間隙的產生。
二、解決空白間隙
1、將兩個div元素不換行，寫成一行。也可以解決這個問題，但是這並不是最好的方法
HTML代碼
<body> <div id="box1">1</div> <div id="box2">2</div><div id="box3">3</div> </body>
CSS代碼
#box2{ width:240px; height:240px; background-color:#aaf; display:inline-block; } #box1{ width:240px; height:60px; background-color: #eef; } #box3{ width:60px; height:240px; background: #ddf; display:inline-block; }
2、解決這個問題，最好方式是給元素加上一個父元素，給父元素font-size:0。（這樣會導致元素中的文字消失，還要在另外給元素中的文字設置大小，文字最小是12px）
HTML部分
<div style="font-size:0">
<div id="box1">1</div>
<div id="box2">2</div><div id="box3">3</div>
</div>
三、其他元素
（一）、<a> 超鏈接出現空白間距
<a href="#" style="background:#99f">我也是超鏈接</a>
<a href="#" style="background:#f99">我是一超鏈接</a>
<a href="#" style="background:#9f9">好巧咱們都是超鏈接</a>
因為在代碼排版的時候，<a>換行了，所以每個超鏈接之間會有空白間隙。a元素默認的是行內塊元素
解決方法：
1、寫成一行；
<a href="#" style="background:#99f">我也是超鏈接</a><a href="#" style="background:#f99">我是一超鏈接</a><a href="#" style="background:#9f9">好巧咱們都是超鏈接</a>
2、在a 元素外面添加一個父元素，在父元素中設置 font-size:0；這樣超鏈接文字大小就變成了0，還要單獨設置樣式 font-size: 16px;。
HTML部分
<div style="font-size:0px; ">
<a href="#" style="background:#99f">我也是超鏈接</a>
<a href="#" style="background:#f99">我是一超鏈接</a>
<a href="#" style="background:#9f9">好巧咱們都是超鏈接</a>
</div>
CSS部分
a{ font-size: 16px;}
（二）圖片之間出現間隙
<img src="1.jpg" width="200px" height="200px"> <img src="2.jpg" width="200px" height="200px">
解決方法：
1、寫成一行；
<img src="1.jpg" width="200px" height="200px"><img src="2.jpg" width="200px" height="200px">
2、設置父元素 font-size:0;
<div style="font-size:0px; ">
<img src="1.jpg" width="200px" height="200px">
<img src="2.jpg" width="200px" height="200px">
</div>
