html - 所有选择器的边距行为异常

Question

我正在尝试使用 CSS 来更好地理解这些怪癖。我遇到过这种情况，并想了解这种行为。我在正文部分运行以下代码：

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga porro molestiae repellat corrupti distinctio, ea corporis quidem. Harum, provident consectetur explicabo omnis dolorum voluptatibus blanditiis ut minus molestiae temporibus repellendus. Lorem ipsum dolor sit amet consectetur, adipisicing elit. A est amet cupiditate ab voluptatibus non eaque minus, dolore eligendi corporis. Libero iure a deleniti numquam vitae incidunt repellat, assumenda itaque. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam quasi dolore magnam nulla asperiores officiis qui fuga similique eum, accusantium autem deserunt sed ad minima architecto et. Reprehenderit, illum ut! Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas dolorem et animi ipsam. Possimus tempora consequatur magnam placeat, deleniti enim nemo, aperiam perferendis ab quos, doloribus magni esse? Quasi, dignissimos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem delectus aut voluptas unde minus veritatis maiores, illum fugit ipsam corrupti voluptatem id modi quod nulla dolorum repudiandae odio fugiat ea. Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum et aliquid placeat facilis animi aspernatur, repellendus cupiditate suscipit corrupti magni ratione architecto, voluptate nisi, nemo eius ipsum. Consequuntur, inventore perspiciatis.</p>

对于 CSS：

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

发生以下行为：首先，body 和 p 标签似乎对于 margin-top 和 margin-bottom 共享相同的 10px 值，但对于 margin-left 和 margin-right 每个 p 和 body 都有自己的 10px 加起来到 20 像素。我看到的第二个怪癖是，p 的框似乎比浏览器边缘的 10px 或 20px 更远，这是为什么呢？

标签： htmlcss