`display：inline-block`-elements上奇怪的边距

本文介绍了`display：inline-block`-elements上奇怪的边距的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在一行中有6 写字体大小：0; 。像这样：

  #container {
 width：300px; 
 border：1px纯黑色; 
 font-size：0; 
}

检查

或

写下你的商标：

 < div id =container> 
< div class =box>< / div>< div class =box>< / div>< div class =box>< / div>< ; div class =box>< / div>< div class =box>< / div>< div class =box>< / div> 
< / div>

请检查此

I have 6 DIVs with display:inline-block in one line. But they have a strange white space between each other, how can I get rid of that? They should fit in the container in one line.
Fiddle: http://jsfiddle.net/y7L7q/
HTML:
<div id="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div>
CSS:
#container{ width:300px; border:1px solid black; } .box{ display:inline-block; height:50px; width:50px; background-color:black; margin:0; padding:0; }
解决方案
Write font-size:0;. Like this:
#container{ width:300px; border:1px solid black; font-size:0; }
Check this http://jsfiddle.net/y7L7q/1/
OR
Write your mark like this:
<div id="container"> <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div> </div>
Check this http://jsfiddle.net/y7L7q/2/

这篇关于`display：inline-block`-elements上奇怪的边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！