神秘的底部填充/边缘问题

Question

我有一个带有.features类的主div,在这个div中我有两个盒子,每个盒子的高度设置为160px,宽度不同.在两个框的末尾和主div之间有一个神秘的填充,如下面的屏幕截图所示:

填充大约是5px - 如果可能的话我想删除这个填充.我尝试添加保证金:0; 和填充:0; 到主要的div以及两个内盒但它没有用.

这是页面这一部分的html:

<div class="features">
    <div class="list-items"></div>
    <div class="screenshot-box"></div>
</div>

css:

 .features {
    width: 980px;
    margin: auto;
    margin-top: 25px;
    background-color: lightblue;
}

.list-items {
    width: 280px;
    height: 160px;
    display: inline-block;
    background-color: red;
}

.screenshot-box {
    width: 583px;
    height: 160px;
    float: right;
    padding-bottom: 0;
    display: inline-block;
    background-color: red;
}

Answer 1

这实际上与padding或无关margin.如果我们查看计算出的样式示例,我们将看到height元素本身是164px:

发生这种情况是因为您的内部元素设置为显示为inline-block.这意味着它们受到影响font-size,并最终font-size导致父元素的高度大于内部元素的高度.

有两个修复:

1. 指定font-size的0您的.features元素,然后在内部元素中重置此(通过给企业提供font-size的16,或任何你的默认大小为).

.features {
  width: 980px;
  margin: auto;
  margin-top: 25px;
  background-color: lightblue;
  font-size: 0;
}

.list-items {
  width: 280px;
  height: 160px;
  display: inline-block;
  background-color: red;
  font-size: 16px;
}

.screenshot-box {
  width: 583px;
  height: 160px;
  float: right;
  padding-bottom: 0;
  display: inline-block;
  background-color: red;
  font-size: 16px;
}

<div class="features">
    <div class="list-items"></div>
    <div class="screenshot-box"></div>
</div>

2. 给你的.features元素的height的160px本身以匹配其孩子.有了这个,浏览器不必计算高度应该是什么.

.features {
  width: 980px;
  margin: auto;
  margin-top: 25px;
  background-color: lightblue;
  height: 160px;
}

.list-items {
  width: 280px;
  height: 160px;
  display: inline-block;
  background-color: red;
}

.screenshot-box {
  width: 583px;
  height: 160px;
  float: right;
  padding-bottom: 0;
  display: inline-block;
  background-color: red;
}

<div class="features">
    <div class="list-items"></div>
    <div class="screenshot-box"></div>
</div>