`display：inline-block`-elements上奇怪的边距 [英] Strange margin on `display:inline-block`-elements

问题描述

我在一行中有6 DIV s，其中 display：inline-block 。但是他们之间有一个奇怪的空白空间，我怎么能摆脱它？他们应该放在一个容器中。

小提琴： 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纯黑色; 
} 
 .box {
 display：inline-block; 
 height：50px; 
 width：50px; 
背景颜色：黑色; 
保证金：0; 
 padding：0; 
 
  

解决方案写字体大小：0; 。像这样：

  #container {
 width：300px; 
 border：1px纯黑色; 
 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> 
  

请检查此 http://jsfiddle.net/y7L7q/2/

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上奇怪的边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！