I am experimenting with CSS to understand the quirks a little better. I have come across this and would like to understand this behaviour. I have the following code running in the body section:
<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>
and for the CSS:
* {
margin: 10px;
padding: 0;
box-sizing: border-box; }
The following behaviour occurs: first of all, the body and p tag seems to share the same value of 10px for margin-top and margin-bottom but for margin-left and margin-right each p and body has its own 10px which adds up to 20px. The second quirk I am seeing is that, the box of the p seems to be further distance than the 10px or 20px from the edge of the browser, why is this?
