Scolar

CSS Margin

1 min read Log in to track progress

margin is transparent space outside an element's border, separating it from its neighbors.

CSS
.box {
  margin-top: 16px;
  margin-right: 8px;
  margin-bottom: 16px;
  margin-left: 8px;
}

Shorthand

CSS
.a { margin: 16px; }              /* all four sides */
.b { margin: 16px 8px; }          /* top/bottom  left/right */
.c { margin: 16px 8px 24px; }     /* top  left/right  bottom */
.d { margin: 16px 8px 24px 4px; } /* top right bottom left, clockwise */

Centering a block with auto margins

A block-level element with a fixed width can be centered horizontally by setting its left/right margins to auto:

CSS
.container {
  width: 800px;
  margin: 0 auto;
}

Margin collapse

Vertical margins between two block elements collapse into a single margin — the larger of the two, not the sum. This only affects top/bottom margins, and doesn't happen with display: flex/grid children, which is one reason flexbox layouts feel more predictable.