marginTop

Margin-top is a CSS property that specifies the top margin of an element—the space outside the element's top border and between it and the preceding content. It is one of the margin properties that control outer spacing in the CSS box model.

Syntax and values: margin-top accepts a length (for example, 20px), a percentage (for example, 5%), or the keyword auto. The initial value is 0. For vertical margins, percentage values are calculated from the width of the containing block, not its height. The zero value can be written simply as 0.

Layout behavior: In normal flow, vertical margins can collapse with adjacent vertical margins between blocks, and with the margins of a parent and its first or last child. When margins collapse, the resulting space is effectively the larger of the collapsing margins rather than the sum of them. This collapsing behavior helps simplify vertical spacing in document-style layouts.

Flexbox and grid: In flex layouts, especially with a column direction, margin-top: auto can absorb any remaining vertical space, effectively pushing other items toward the end of the container. In grid layouts, margin-top works as spacing around a grid item and generally does not participate in margin collapsing in the same way as in normal flow.

Practical notes: Margin-top is not inherited; it applies independently to each element. It is commonly used alongside other margins to control vertical rhythm and responsive spacing across different screen sizes.

See also: margin, margin-left, margin-right, and margin-bottom, as well as the shorthand margin property.