为何<p>元素下外边距与<label>元素上外边距重叠？含默认边距疑问

1. <p>元素是否有默认外边距？ #

是的，<p>是HTML标准块级元素，浏览器的默认样式表会为它预设上下外边距（通常为16px 0，不同浏览器数值可能略有差异）。这是浏览器为了优化段落间的可读性，默认添加的样式，无需开发者手动配置就会生效。

2. 外边距重叠现象的原因 #

你遇到的是CSS中的外边距折叠（Margin Collapsing） 规则，具体触发逻辑如下：

• 当两个相邻的块级元素（此处为<p>的下外边距和第一个<label>的上外边距）处于正常文档流（非浮动、非定位、不在flex/grid容器内），且元素间没有边框、内边距、清除浮动或其他内容分隔时，它们的垂直外边距会发生折叠。
• 折叠后的最终外边距取两个值中的较大者（这里两者均为16px，所以实际间距仍是16px，而非16px+16px=32px）。

避免外边距折叠的方法 #

如果需要消除这种折叠效果，可以尝试以下方式：

• 给其中一个元素添加透明边框（比如给<p>设置border-bottom: 1px solid transparent）
• 给其中一个元素添加内边距
• 将元素放入flex/grid容器中（flex/grid布局不会触发外边距折叠）
• 给元素设置浮动或绝对定位

代码参考 #

CSS代码

label {
  display: block;
  margin-top: 1em;
}

input:focus {
  background-color: lightblue;
}

select:focus {
  background-color: #f0f0f0;
}

HTML代码

<!DOCTYPE html>

<html lang="en">

<head>
  <title>:focus CSS Pseudo-class</title>
  <link rel="stylesheet" type="text/css" href="styles/focus_pseudo-class.css">
</head>

<body>
  <form>
    <p>Which flavor would you like to order?</p>
    <label>Full Name: <input name="firstName" type="text"></label>
    <label>Flavor:
            <select name="flavor">
                <option>Cherry</option>
                <option>Green Tea</option>
                <option>Moose Tracks</option>
                <option>Mint Chip</option>
            </select>
        </label>
  </form>
</body>

</html>

内容的提问来源于stack exchange，提问作者YuanLinTech