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

Question

我有一个 .features 类的主 div，在这个 div 内我有两个框，每个框的高度设置为 160 像素，宽度不同。在两个盒子的末端和主 div 之间有一个神秘的填充，如下面的屏幕截图所示：

内边距约为 5 像素 - 如果可能，我想删除此内边距。我尝试添加边距：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. 在您的.features 元素上指定font-size 或0，然后在内部元素中重置它（通过给它们一个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 设为.features 的0，它将占用全宽。 Here 是你的小提琴。

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

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

Answer 3

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

@james donnelly 已经给你一个准确简洁的原因解释了。