我在一行中有 6 个 DIV
和 display:inline-block
。但是他们之间有一个奇怪的空白,我该如何摆脱呢?它们应该排成一行放入容器中。
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;
}
最佳答案
写font-size:0;
。像这样:
#container{
width:300px;
border:1px solid black;
font-size:0;
}
检查这个http://jsfiddle.net/y7L7q/1/
或
这样写你的标记:
<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>
关于html - `display:inline-block` 元素上的奇怪边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9664321/