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

Question

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

内边距大约为 5 像素 - 如果可能，我想删除该内边距。我尝试添加 margin: 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 元素上指定 0 的 font-size，然后在内部元素中重置它(通过给它们一个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 元素赋予 160px 本身的 height 以匹配其子项。有了这个，浏览器就不必自己计算高度了。

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