当多个连续的inline-block元素水平方向排列时,各个元素之间会出现空白间隔,这是由于空白字符(空格或换行)引起的。
HTML
<div id="container">
<div class="cell">cell1</div>
<div class="cell">cell2</div>
<div class="cell">cell3</div>
<div class="cell">cell4</div>
</div>
CSS
#container {
background: #bbada0;
width: 215px;
padding: 10px;
}
#container .cell {
width: 50px;
height: 25px;
display: inline-block;
zoom: 1;
*display: inline;
background: #cdc1b4;
text-align: center;
}
效果是这样的:
有时候因为实际布局需要,或者为了避免不必要的影响,必须去除空白,下面总结了几种常用的解决方案:
- 移除空白字符,全部写在同一行
<div id="container"> <div class="cell">cell1</div><div class="cell">cell2</div><div class="cell">cell3</div><div class="cell">cell4</div> </div>
- 改变换行的位置
<div id="container"> <div class="cell"> cell1</div><div class="cell"> cell2</div><div class="cell"> cell3</div><div class="cell"> cell4</div> </div>
- 设置父元素的font-size为0,再为每个inline-block对象设置font-size的值
最终效果是这样的:#container { background: #bbada0; width: 215px; padding: 10px; font-size: 0; }