未知的额外保证金

时间:2016-01-10 18:09:12

标签: html css

我有几个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/。 问题是:如何删除额外的保证金? 感谢。

2 个答案:

答案 0 :(得分:-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;
}

答案 1 :(得分:-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;
}