Why do adjacent vertical margins collapse instead of adding together?

It is probably collapsing the margins. When two positive vertical margins on adjacent block boxes in normal flow meet, they can combine into a single margin whose size is the larger value. So in your example the gap is 24px, rather than 24px plus 16px. [S1]

Here is a small reproduction. The sections are block elements in ordinary document flow:

<style>
  .first { margin-bottom: 24px; }
  .second { margin-top: 16px; }
</style>

<section class="first">First section</section>
<section class="second">Second section</section>

That behavior applies to vertical margins, not horizontal ones. It is a CSS layout rule, not a sign that the browser failed to apply your declaration. [S1]

It can happen in more than one arrangement. Adjacent siblings are a common case, but a parent’s margin can also collapse with the top margin of its first child, or with the bottom margin of its last child, under qualifying conditions. An empty block can also have its top and bottom margins collapse together. [S1]

That is why a child’s top margin may appear to create space outside its parent rather than inside it. A border or padding on the parent can separate the parent and child margins. Qualifying content or sizing can also prevent that particular parent-child collapse, as can establishing a new block formatting context on the parent. [S1]

For a quick check, inspect both the child and its parent in your browser’s developer tools. Look for adjoining vertical margins and check whether the parent has a border, padding, relevant content, or a formatting context that changes the behavior.

Choose a spacing rule that directly represents the result you want. If the sections are siblings in a repeated vertical layout, put them in a flex or grid container and set gap: 40px. Margins do not collapse between flex or grid items, and gap specifies space between items rather than adding a margin to each one. [S1] [S2]

.sections {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

<div class="sections">
  <section>First section</section>
  <section>Second section</section>
</div>

If you want to keep ordinary block flow, give one element a single spacing responsibility—for example, margin-bottom: 40px on each section except the last. Alternatively, if a boundary is what you need, add padding or a border where appropriate. Avoid putting large opposing margins on both neighbors and expecting them to sum.

A parent with display: flow-root establishes a new block formatting context, which prevents its margins from collapsing with its children. [S1] That can be useful when the specific problem is a parent-child collapse. It does not mean that every pair of sibling margins inside the parent stops collapsing, so it may not solve the spacing between your two sections.

For repeated spacing between items, use a flex or grid layout with gap. For a simple block-flow document, assign spacing consistently to one side of each element, or use a parent’s padding when you need space inside a boundary. gap is documented for multi-column, flex, and grid layouts—not ordinary block flow. [S2]

There is no single best fix for every layout. Pick the one that matches the structure and spacing relationship you intend, then verify the result in that context.