An empty div with margin-top: 20px and margin-bottom: 30px, and no height, padding, border or content, sits between two paragraphs in normal flow. How much vertical space does it contribute?
answer
- the box occupies no space at all
- its own two margins are adjoining
- larger of the two survives
- and then it merges with the neighbours
- min-height or padding stops it
basics
~20 sAbout 30px, not 50px. With no height, padding, border or content, the div self-collapses: its own top and bottom margins are adjoining and merge, and that single margin then collapses with the neighbouring paragraphs' margins too.
solid answer
~40 sIt contributes roughly 30px rather than 50px. A box with no border, no padding, no inline content, and a height of `0` or `auto` with a zero `min-height` is *self-collapsing*: its own top and bottom margins are adjoining, because nothing separates them, so they merge into one margin equal to the larger. That surviving margin is then adjoining to the previous paragraph's bottom margin and the next paragraph's top margin, so the whole chain collapses into a single margin — the maximum of all four values. Give the div `min-height: 1px`, a border, or padding and it stops self-collapsing: the margins are separated and both are used. This is why an empty spacer div is an unreliable way to add space.
code
html · 10 lines<style>
p { margin: 16px 0; }
.spacer { margin-top: 20px; margin-bottom: 30px; }
.spacer.solid { min-height: 1px; }
</style>
<p>before</p>
<div class="spacer"></div>
<p>after: total separation is 30px</p>
<div class="spacer solid"></div>
<p>after: min-height stops the self-collapse</p>go deeper
Know that an empty element with only margins does not add both of them — its own top and bottom margins merge into the larger one.
List the self-collapsing conditions — no border, no padding, no line box, zero or auto height with zero min-height — and explain how the surviving margin merges outward with the neighbours.
Connect it to real symptoms: spacer divs that do nothing, and conditionally rendered elements that shift layout by more than their content height when empty.
Push the codebase towards container-owned gap or a one-direction margin convention so that invisible elements never carry layout meaning in the first place.
## Self-collapsing boxes A block box is called **self-collapsing** when its own top and bottom margins are adjoining to each other. That happens when the box has: - no `border-top` or `border-bottom`, - no `padding-top` or `padding-bottom`, - no inline content that generates a line box, - a `height` of `0` or `auto`, and a `min-height` of `0`, - and any in-flow children whose margins all collapse too. An empty `<div>` with only margins meets every condition. Its top and bottom border edges are in the same place, so nothing lies between its top margin and its bottom margin, and by the ordinary adjoining rule they collapse into a single margin equal to the larger of the two: 30px here. ```css .spacer { margin-top: 20px; margin-bottom: 30px; } /* contributes 30px, not 50px */ ``` ## Then it keeps collapsing outward The surviving margin does not stop there. Because the box occupies no space, its collapsed margin is now adjoining both the previous paragraph's bottom margin and the following paragraph's top margin. All of them belong to one collapse, and the used separation between the two paragraphs is the maximum of the whole set. If the paragraphs carry a default `1em` (say 16px) margin on each side, the set is 16, 20, 30, 16 and the answer is 30px total between the paragraphs — the spacer added 14px over what the paragraphs would have had on their own. ## Why anyone cares This is the mechanism behind the classic "my spacer div does nothing" bug, and behind the older clearfix technique where an empty element with `clear: both` failed to push anything down. It also explains a subtler case: an element whose content is conditionally rendered. Full of content it separates its neighbours by top margin plus content plus bottom margin; empty it silently self-collapses and the layout shifts by more than the missing content's height. ## Turning it off Any one of these breaks the self-collapse, because each puts something between the two margins: - `min-height: 1px` (or any non-zero `min-height`), - `padding: 1px 0` or a single-side padding, - a `border-top` or `border-bottom`, including a transparent one, - actual content that generates a line box. Note what does *not* work: `height: auto` is already the default, and `display: block` is already the box's display type. Setting `line-height` has no effect while there is no content to lay out on a line. ## The better answer in an interview After explaining the mechanism, say what you would do instead: an empty element used purely for spacing is a smell. Space between siblings belongs either on the elements themselves as a one-direction margin, or — better in a component-oriented codebase — on the container as a `gap`, where the value you write is the value you get regardless of what the children declare.
- What changes if the empty div is given border-top: 1px solid transparent?The border sits between the box's top and bottom margins, so they are no longer adjoining and the box stops self-collapsing. Its top margin now collapses with the previous paragraph's bottom margin and its bottom margin with the next paragraph's top margin, but not through itself — the separation grows by roughly the bottom margin plus that 1px.
- Why can a conditionally rendered element cause a bigger layout shift than the height of its content?Because when it renders empty it self-collapses: it loses its own height and merges its top and bottom margins into one, which then merges with its neighbours'. The layout loses the content height plus one of the two margins plus whatever the outward collapse absorbs, rather than the content height alone.
- What would you use instead of an empty spacer div?Put the spacing on the elements themselves as a single-direction margin, or on the container as a flex or grid `gap`. `gap` is the most predictable: it is applied between items regardless of what margins they declare, it never collapses, and it keeps the spacing decision with the layout that owns it rather than with an invisible element.
saying these in an interview costs you the question
- Says the empty div contributes 50px of space
- Thinks an element with no content is not laid out at all
- Adds display: block expecting it to stop the collapse
- Believes only a fixed height, never min-height, prevents it
- Treats an empty spacer div as reliable layout