Two vertical margins that touch in normal flow do not add up. They collapse into a single margin the size of the larger one, which is why a heading with 20px below it and a paragraph with 12px above it are 20px apart rather than 32px. Horizontal margins never do this.
.summary h2 { margin-bottom: 20px; }
.summary p { margin-top: 12px; }
/* the gap is 20px */
.card { margin-top: 30px; }
.card h3 { margin-top: 24px; }
/* the h3 margin escapes and moves .card, not the heading */The second case is the one that actually costs an afternoon. A margin on a first child collapses through the parent and ends up moving the parent, so the space appears above the box instead of inside it. Anything that separates the two edges stops it: a border, a pixel of padding, overflow set to anything other than visible, or floating the parent. Padding on the parent instead of margin on the child sidesteps the whole rule, which is usually the right answer once you know that is what you are choosing.