CodePark/ questions / Box model & sizing
START PRACTICINGPRACTICE
Frontend question · CSS & HTML › Box model & sizing

Two block paragraphs sit one after the other in normal flow. How much vertical space separates them?

.first  { margin-bottom: 30px; }
.second { margin-top: 20px; }
30px

30px is right. When the vertical margins of two block boxes touch in normal flow, they collapse. They merge into one margin equal to the larger value. Normal flow is the default layout, with no flex, grid, floats or positioning.

50px is the tempting wrong answer, because it adds the two margins. That only happens between flex or grid items, where margins never collapse.