通配选择器（*）下margin表现异常的原因探究

嘿，这个问题涉及到CSS里两个核心知识点：**外边距合并（Margin Collapsing）**和根元素的特殊处理，我给你一步步拆解清楚：

一、为什么上下margin合并，左右却叠加？ #

• 首先，CSS的外边距合并规则只针对垂直方向（上下）的块级元素：当两个相邻的块级元素（比如你的<body>和<p>）之间没有padding、border、clear或者行内元素分隔时，它们的上下外边距会合并成一个，取值为两者中的最大值（这里你给所有元素设了margin:10px，所以合并后上下间距都是10px）。
• 而水平方向（左右）的外边距不存在合并规则，所以<body>的margin-left:10px和<p>的margin-left:10px会直接叠加，最终左右的总间距是20px。

二、为什么p元素和浏览器边缘的间距看起来比预期大？ #

你用了通配符选择器*给所有元素设置了margin:10px，这包括了根元素<html>！

根元素<html>的外边距不会和它的子元素<body>的外边距合并（这是CSS对根元素的特殊规定），所以：

• 顶部总间距 = html的margin-top:10px + （body和p合并后的margin-top:10px）= 20px
• 左侧总间距 = html的margin-left:10px + body的margin-left:10px + p的margin-left:10px = 30px

这就导致你看到的间距比10px或20px要大。如果想验证这个逻辑，你可以给<html>单独设置margin:0，就能看到符合预期的效果：

html { margin: 0; }
* { margin: 10px; padding: 0; box-sizing: border-box; }

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