Difficulty: Beginner
Margin is the outermost layer of the CSS box model. It creates space between the element's border and surrounding elements. Unlike padding, which is inside the border and takes the element's background color, margin is outside the border and is always transparent. Margins push elements away from their neighbors, creating breathing room in layouts.
The margin shorthand follows the same clockwise pattern as padding: margin: top right bottom left. The same shorthand forms apply: one value (all sides), two values (vertical, horizontal), three values (top, horizontal, bottom), and four values (each side individually). Margin also supports auto, negative values, and percentage values. Percentage margins, like percentage padding, are calculated relative to the parent's width.
The margin: auto technique is one of the most important centering methods in CSS. When you set margin-left: auto and margin-right: auto (or margin: 0 auto) on a block element with a declared width, the browser distributes the remaining horizontal space equally on both sides, centering the element within its parent. This only works horizontally on block elements -- margin: auto does not center vertically in normal flow (for that, use flexbox or grid).
Margin collapsing is one of CSS's most confusing behaviors and a frequent interview question. When two vertical margins meet (top margin of one element touching the bottom margin of the element above it), they do not add together. Instead, the larger margin wins. For example, if one element has margin-bottom: 30px and the next has margin-top: 20px, the space between them is 30px, not 50px. Margin collapsing only happens vertically (not horizontally), only with block elements in normal flow (not with flex or grid items), and does not occur when there is padding, border, or content between the margins.
Negative margins are a powerful but often misunderstood feature. A negative margin pulls the element in the specified direction: negative margin-top pulls the element up, negative margin-left pulls it left. Negative margins on the right or bottom pull subsequent content toward the element. They can be used for overlapping elements, pulling elements out of their containers, and creative layout techniques. Use them sparingly and intentionally, as they can make layouts harder to understand and maintain.
/* Center a block element horizontally */
.container {
width: 800px;
margin: 0 auto; /* 0 top/bottom, auto left/right */
background-color: #f5f5f5;
}
/* Common page centering pattern */
.page {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding: 0 16px;
}
/* Margin shorthand forms */
.box-a { margin: 20px; } /* all sides */
.box-b { margin: 10px 20px; } /* vertical, horizontal */
.box-c { margin: 10px 20px 30px; } /* top, horizontal, bottom */
.box-d { margin: 10px 20px 30px 40px; } /* top, right, bottom, left */margin: 0 auto is the classic block centering technique. It requires the element to have a declared width (or max-width). The browser calculates the remaining space and splits it equally between left and right margins. max-width with margin auto is the standard page container pattern.
/* Margin collapsing between siblings */
.box-1 {
margin-bottom: 30px;
background-color: lightblue;
padding: 20px;
}
.box-2 {
margin-top: 20px;
background-color: lightgreen;
padding: 20px;
}
/* Gap between .box-1 and .box-2 is 30px, NOT 50px */
/* The larger margin wins */
/* Preventing margin collapse */
.no-collapse-parent {
/* Any of these prevent parent-child margin collapse: */
overflow: hidden; /* or */
padding-top: 1px; /* or */
border-top: 1px solid transparent; /* or */
display: flow-root; /* cleanest solution */
}Vertical margins collapse: the larger margin wins rather than adding together. This happens between siblings and between parent-child elements. It does NOT happen with flexbox items, grid items, floated elements, or when padding/border separates the margins. display: flow-root on the parent is the cleanest way to prevent parent-child margin collapse.
/* Pull element up to overlap */
.overlap-card {
margin-top: -40px;
background-color: white;
padding: 20px;
position: relative; /* for z-index to work */
z-index: 1;
}
/* Pull element out of container */
.full-bleed {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
/* Negative margin to close gaps */
.grid-hack {
margin-right: -16px; /* compensate for child margins */
}Negative top/left margins pull the element in that direction. Negative bottom/right margins pull subsequent content toward the element. The full-bleed pattern uses negative margins to extend an element beyond its padded parent. Use negative margins sparingly.
/* COLLAPSES: Adjacent sibling vertical margins */
.sibling-a { margin-bottom: 20px; }
.sibling-b { margin-top: 30px; }
/* Result: 30px gap (larger wins) */
/* COLLAPSES: Parent-child when no border/padding */
.parent { margin-top: 20px; }
.child { margin-top: 30px; }
/* Result: parent gets 30px top margin, child has 0 */
/* DOES NOT COLLAPSE: Horizontal margins */
.left { margin-right: 20px; display: inline-block; }
.right { margin-left: 30px; display: inline-block; }
/* Result: 50px gap (both apply) */
/* DOES NOT COLLAPSE: Flex/grid items */
.flex-parent { display: flex; flex-direction: column; }
.flex-child-a { margin-bottom: 20px; }
.flex-child-b { margin-top: 30px; }
/* Result: 50px gap (both apply, no collapse) */Margin collapsing rules: (1) Only vertical margins collapse, never horizontal. (2) Only block-level elements in normal flow -- flex items, grid items, and floats do not collapse. (3) Parent-child margins collapse when there is no border, padding, or content between them. (4) Empty elements collapse their own top and bottom margins.
Margin Properties, Auto Centering, Margin Collapsing, Negative Margins, Margin Shorthand