html - 为什么 CSS 填充在作为 HTML 表单的父级应用于 div 时不能统一工作？

Question

我只为 div 的顶部和底部应用了填充。 padding 属性对表单元素均匀工作，但不适用于表单的父级 div，如下图所示。

输出:-

#content {
  font-family: arial;
  margin-top: 30px;
  background: #99ccff;
  padding: 10px 0px
}

#content form {
  background: #990000;
  padding: 10px 0px;
}

<div id="content">
  <form>
    <label for="mid">MID:</label>
    <input type="text" name="mid" id="mid" class="input" />
    <input type="submit" name="sbmit" id="sbmit" value="Submit" />
  </form>
</div>

Firefox、Opera 和 Chrome 都显示相同的结果。

我想知道为什么 div 的填充在顶部和底部布局方面没有表现出同质行为？

Answer 1

如果您将该 CSS 和 HTML 放入一个空白的 HTML 文件中，则默认的用户代理样式表会导致该问题 - 它会给出 <form>元素默认底部边距为 1em，您需要使用 form { margin: 0; } 覆盖它