That 12px Child Element Is 63px Tall Because of a Ghost Called Strut
Unexplained whitespace in CSS layouts is a persistent source of frustration and wasted debugging time. Knowing that a strut exists and how to eliminate it replaces guesswork with a deterministic fix, applicable to any project where inline-block elements misbehave inside a parent.
When a block container holds an inline-level child, the browser inserts an invisible strut that inherits the parent's font-size and line-height. Baseline alignment then forces the container to be at least as tall as that strut, creating unexpected whitespace above and below the child. The effect is most jarring when a single small inline-block sits inside a large-font parent with no other text.
Three fixes eliminate the gap: zeroing out the parent's font-size and line-height to kill the strut, switching the child to display: block so it establishes its own formatting context, or converting the parent to a flex or grid container. Each approach removes the IFC that spawns the strut in the first place.
The underlying mechanism ties into CSS's four formatting contexts — IFC, BFC, FFC, and GFC — which govern how elements participate in layout. Recognizing which context is active explains why a container's height doesn't always match its visible contents.
Strut behavior is not a bug but a deliberate design for mixed inline content, yet it surprises developers because the browser's invisible box is never mentioned in most CSS tutorials.
The baseline-alignment default is the root cause; changing vertical-align on the child can also shift the layout, though it doesn't remove the strut itself.
Modern layout methods like flexbox and grid sidestep an entire class of IFC quirks, making them a more robust default than inline-block for component containers.