未知的额外保证金

Question

我有几个div元素，我想与20px的边距对齐。但是，当我将边距设置为20像素时，还有4个像素被渲染。 下面是代码：

.block{ 
    width:50px; 
    height:50px; 
    background:red; 
    display:inline-block; 
    margin-right:20px; 
    vertical-align:top; 
} 

*{ 
    margin:0 
    padding:0 
    border-width:0px; 
} 

检查https://jsfiddle.net/zyfzbyed/8/与督察。 现在的问题是：如何删除额外的边距？ 谢谢。

Answer 1

在HTML中使用

<div class='block'></div><div class='block'></div> 

代替

<div class='block'> 

</div> 
<div class='block'> 

</div> 

如果要通过CSS来解决这个问题，你应该设定div的流动left为按照

.block{ 
    width:50px; 
    height:50px; 
    background:red; 
    display:inline-block; 
    margin-right:0px; 
    vertical-align:top; 
    float: left; 
} 

Answer 2

您可以在CSS中添加float:left;到.block以删除inline-block元素创建的额外页边空白。您块的CSS应该是：

.block{ 
    width:50px; 
    height:50px; 
    background:red; 
    display:inline-block; 
    margin-right:0px; 
    vertical-align:top; 
    float: left; 
}