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

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>

1. 为您的.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>

Answer 2

只需将font-size设为0 .features，它就会占据全宽。 Here是你的小提琴。

＆＃13;

＆＃13;

.features {
  width: 980px;
  margin: auto;
  margin-top: 25px;
  background-color: lightblue;
  font-size: 0;
  /*Just make font size as 0*/
}
.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

您也可以放弃两个子元素上的display: inline-block，并在float: left和.list-items上设置display: table .features（code example） 。增加的好处是，如果没有硬编码的父div高度，父div将扩展以适合子内容。

@james donnelly已经为您提供了准确而简明的解释。