Question

我有几个div元素，我希望与20px边距对齐。但是，当我将边距设置为20px时，会渲染额外的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

您可以在CSS中将float:left;添加到.block，以删除由inline-block元素创建的额外边距。你的css for block应该是：

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

Answer 2

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;
}

未知的额外保证金

2 个答案: