CSS margin-bottom Property

The margin-bottom property controls the space outside an element’s border on its lower edge. It is one side of the overall box-model margin and is commonly used to separate stacked elements vertically, creating whitespace that other elements can occupy. Because this space is outside the element’s border, it is transparent and will reveal the background of the parent or the page behind it rather than the element’s own background; it is also conceptually part of the broader margin concept used to control spacing on all four sides.

In a normal flow of block layout, vertical spacing produced by margin-bottom can interact with the top margin of the element that follows; those vertical margins may collapse into a single margin rather than add together. That collapsing behavior has a few well-known exceptions: it does not happen when there is border or padding between the margins (so adding padding or a border prevents collapse), and it behaves differently for out-of-flow elements. Creating a block formatting context will also stop vertical margin collapsing, which can be triggered by certain layout conditions such as specific overflow settings, certain display values, or floating an element with float.

How margin-bottom affects layout depends on an element’s formatting context and positioning. For floated or absolutely positioned elements the margin participates in that element’s placement but does not collapse with neighboring in-flow block margins; out-of-flow elements are effectively removed from normal flow so their margins won’t push other blocks in the usual way. For inline-level elements vertical margins behave differently than on blocks: they generally don’t create the same external push between lines the way block-level margins do, and some layout modes (for example when an element is part of a flex formatting context created by certain display values) interact with margins in ways that are specific to that layout mode. Finally, because margin-bottom is purely spacing outside the border, it is a common and powerful tool for visual rhythm and separation in responsive layouts, but its interactions with collapse and formatting contexts should be kept in mind when predictable spacing is required—especially when mixing floats, positioned elements, and different display types.