为什么这个div的背景显示在顶部，而它应该被它的内容完全填满？

Question

我有一个div，它包含另一个包含input的div。外部div从内部div获取其高度，后者从input获取其高度。在div上没有填充或空白处。我已经从输入中删除了边框。为什么外部div的红色背景在顶部显示一个像素?为什么当input有padding: 0时，它会变得更糟？(使用复选框来尝试它)。

我已经将它与input的border: none风格隔离开来(去掉去掉红色栏的部分)，但我想了解它为什么会产生这种效果(无论是在Chrome还是火狐浏览器上)。

​

document.querySelector("input[type=checkbox]").addEventListener("click", function() {
  document.querySelector("input[type=text]").classList.toggle("zero-padding", this.checked);
});

body {
    box-sizing: border-box;
}
.outer {
    display: inline-block;
    width: 5em;
    border: 1px solid black;
    background: red;
    /* divs don't have padding or margin by default, but I did try this just in case
    padding: 0;
    margin: 0;
    */
}
.inner {
    /* divs don't have padding or margin by default, but I did try this just in case
    padding: 0;
    margin: 0;
    */
}
.inner input {
    border: none;
    border-radius: 0;
    width: 100%;
    margin: 0;
    background: white;
}
.zero-padding {
  padding: 0;
}

<div class="outer"><div class="inner"><input type="text"></div></div>
<div>
  <label>
    <input type="checkbox"> Add <code>padding: 0</code> to the <code>input</code>
  </label>
</div>

​

我在Linux上的Chrome v58上的结果：

​

​

我在Linux上的火狐v53上的结果：

​

​

Answer 1

这些div默认属性，例如字体大小、行高。通过将“外部”div的线高设置为0来解决这一问题；

​

document.querySelector("input[type=checkbox]").addEventListener("click", function() {
  document.querySelector("input[type=text]").classList.toggle("zero-padding", this.checked);
});

body {
    box-sizing: border-box;
}
.outer {
    display: inline-block;
    width: 5em;
    border: 1px solid black;
    background: red;
    line-height: 0;
    /* divs don't have padding or margin by default, but I did try this just in case
    padding: 0;
    margin: 0;
    */
    
}
.inner {
    /* divs don't have padding or margin by default, but I did try this just in case
    padding: 0;
    margin: 0;
    */
}
.inner input {
    border: none;
    border-radius: 0;
    width: 100%;
    margin: 0;
    background: white;
}
.zero-padding {
  padding: 0;
}

<div class="outer"><div class="inner"><input type="text"></div></div>
<div>
  <label>
    <input type="checkbox"> Add <code>padding: 0</code> to the <code>input</code>
  </label>
</div>

​

Answer 2

问题是，默认情况下，input字段具有display: inline-block。

如果你设置

display: block;
padding: 0;

在输入上，它修正了它。

为什么？不知道实际上..。:(