About Margins in CSS

Margins of adjacent elements are not additive, they overlap each other. For example, with this HTML:

1
2
<h1>Hello, World!</h1>
<p>Welcome here!</p>

and this CSS:

1
2
h1 { margin: 3rem; }
p { margin: 2rem; }

the spacing between "Hello, World!" and "Welcome here!" will be 3rem, not 5rem.

Tips and Tricks Web Design HTML5 CSS3 CSS2