display:inline-block空格的解决办法
如图当我们使用display:inline-block时元素之间会有空格。
首先,先了解下display:inline-block的兼容性问题:
下面我整理了几种解决的办法,已经在Chrome,Firefox,IE上测试:
1.标签之间无空隙
<div class="div" style="background:#3f7ccf;">1</div><div class="div" style="background:#dcd9c0;">2</div><div class="div" style="background:#ffed53;">3</div>
2.标签使用同一个关闭标签(标签名相同)
<style> div{padding:0;margin:0;border:0;} .box{height:100px;border:1px solid red; } .div{width:100px;height:100px;display:inline-block;} .div{*display:inline;zoom:1;} </style> <div class="box"> <a class="div" style="background:#3f7ccf;">1 <a class="div" style="background:#dcd9c0;">2 <a class="div" style="background:#ffed53;">3</a> </div>
注意:经测试,使用div标签不能实现。
3.注释将元素之间的间隔去掉
<div class="box"> <div class="div" style="background:#3f7ccf;">1</div><!-- --><div class="div" style="background:#dcd9c0;">2</div><!-- --><div class="div" style="background:#ffed53;">3</div> </div>
4.父元素设置font-size:0;
<style> div{padding:0;margin:0;border:0;} .box{height:100px;border:1px solid red;font-size:0;} .div{width:100px;height:100px;display:inline-block;} .div{*display:inline;zoom:1;} </style> <div class="box"> <div class="div" style="background:#3f7ccf;">1</div> <div class="div" style="background:#dcd9c0;">2</div> <div class="div" style="background:#ffed53;">3</div> </div>
5.父元素设置letter-spacing:0;
<style> div{padding:0;margin:0;border:0;} .box{height:100px;border:1px solid red;letter-spacing:-10px;} .div{width:100px;height:100px;display:inline-block;} .div{*display:inline;zoom:1;} </style> <div class="box"> <div class="div" style="background:#3f7ccf;">1</div> <div class="div" style="background:#dcd9c0;">2</div> <div class="div" style="background:#ffed53;">3</div> </div>
当.div元素标签改成行内元素或行内块元素时,IE6、7存在兼容性问题,会遮盖部分元素
以上说的都是水平方向上元素间的空隙解决方法,对于上下间距,可以使用vertical-align属性来设置