我正在尝试使用CSS来更好地理解怪癖。 我遇到过这种情况,并希望了解这种行为。 我在body部分运行了以下代码:
<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最多可增加20px。我看到的第二个怪癖是,p的框似乎比浏览器边缘的10px或20px更远,为什么会这样?