html - 为什么这个 div 的背景应该完全由其内容填充时却显示在顶部？

Question

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

我已经将它与 input 的 border: none 风格隔离开来(删除红色条)，但我想了解 < em>为什么它有这种效果(在 Chrome 和 Firefox 上)。

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 上的 Firefox 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>