main标签前后出现多余空白，求原因及相关基础知识解答

你遇到的是CSS里**外边距折叠（Margin Collapse）**的默认布局行为，和main本身的margin无关。

具体分析你的代码 #

你给article.newsBox设置了margin:16px，但main元素既没有设置border、padding，也没有任何能阻断外边距折叠的属性。这种情况下，第一个article的margin-top会“穿透”main元素，和main上方的header形成16px的空白；同理，最后一个article的margin-bottom会穿透main，和下方的footer形成空白——这就是父元素与子元素的外边距折叠。

你缺少的基础知识 #

外边距折叠是CSS的核心布局规则之一，常见场景有三种：

• 父元素与子元素折叠：当父元素无border、padding、inline内容，也未通过overflow/clear等创建BFC时，父元素的上下边距会和第一个/最后一个子元素的对应边距合并。
• 相邻兄弟元素折叠：两个相邻块级元素的上下margin会合并成一个，取较大值（如果是正负值则相加）。
• 空块级元素折叠：没有内容、padding、border的空块级元素，自身的上下margin会折叠成一个。

解决方法（任选其一即可） #

1. 给main添加border或padding，阻断折叠：

main {
  background-color: var(--mainBackground);
  padding: 1px 0; /* 非0的padding就能打破折叠条件 */
}

2. 给main创建BFC（块级格式化上下文）：

main {
  background-color: var(--mainBackground);
  overflow: auto; /* 创建BFC后会阻断外边距折叠 */
}

3. 把article的margin替换成padding（调整布局逻辑）：

article.newsBox {
  padding: calc(1rem + 16px) 1rem; /* 原padding + 原margin值 */
  border: 1px solid var(--newsBoxBroder);
  /* 去掉原margin:16px */
}

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