REFERENCEcss

css Documentation

📖 INDEX

# css-syntax

# including-css-in-html

# universal-selectors

# css-attribute-selectors

# descendant-selectors

# background-position

# top-right-bottom-left

# grid-template-columns

# grid-template-rows

# grid-gap

# grid-template-areas

# transition-duration

# transition-timing-function

# animation-timing-function

# animation-delay

# media-queries

# ref-screen-dimensions

# orientation

# resolution

# ref-device-characteristics

LOADING ENGINE...

Margin

AI & DATA SCIENCE // margin

The margin property sets the transparent space outside an element's border, controlling how far it sits from neighboring elements.

Syntax

margin: top right bottom left;
margin: vertical horizontal;
margin: all-sides;

Deep Dive Course

margin can take one value, applying it to all four sides, two values, applying the first to top/bottom and the second to left/right, or four values, applying them clockwise starting from the top. Vertical margins between two adjacent block elements collapse together into a single margin equal to the larger of the two, rather than adding together, a behavior specifically called margin collapsing that applies only to vertical margins between certain block-level elements, never to horizontal margins or to margins involving flex or grid items. Setting margin: auto on a block element with a defined width is the classic technique for horizontally centering it within its container.

1Understanding Margin

💡

Margin collapsing only affects vertical margins between certain block-level elements in normal document flow — it never applies to horizontal margins, and doesn't apply to flex or grid items, which is a common source of confusion when the exact same-looking margin values behave differently depending on the layout context.

editor.html

.card {
  margin: 20px;
}

localhost:3000

2Practical Example

Here is a real-world application of Margin showing how it is used in production CSS code.

editor.html

.container {
  width: 400px;
  margin: 0 auto;
}

localhost:3000

3Best Practices

Follow these guidelines when working with Margin:

1. Use margin: auto on a block element with a defined width to horizontally center it within its parent container

2. Account for margin collapsing when stacking block elements vertically, since two adjacent 20px margins collapse into a single 20px gap, not 40px

3. Use a single shorthand margin declaration with one to four values instead of four separate margin-top/right/bottom/left declarations, for more concise, readable CSS

⚠️

Tip: Margin collapsing only affects vertical margins between certain block-level elements in normal document flow — it never applies to horizontal margins, and doesn't apply to flex or grid items, which is a common source of confusion when the exact same-looking margin values behave differently depending on the layout context.

editor.html

.card {
  margin: 20px;
}

localhost:3000

Examples

Example 01Basic Usage

.card {
  margin: 20px;
}

Example 02Advanced Example

.container {
  width: 400px;
  margin: 0 auto;
}

Best Practices

Use margin: auto on a block element with a defined width to horizontally center it within its parent container
Account for margin collapsing when stacking block elements vertically, since two adjacent 20px margins collapse into a single 20px gap, not 40px
Use a single shorthand margin declaration with one to four values instead of four separate margin-top/right/bottom/left declarations, for more concise, readable CSS

Interview Question

Why do two stacked <div> elements with margin-bottom: 20px and margin-top: 20px end up with only 20px of space between them, not 40px?▼

Hint: Think about margin collapsing, and specifically which margins it applies to.

This is exactly the behavior of vertical margin collapsing, a specific CSS rule where the vertical margins between adjacent block-level elements in normal document flow don't simply add together the way you might intuitively expect two separate spacing values to combine — instead, the two touching vertical margins collapse into a single margin equal to whichever of the two values is larger, 20px in this case, since both happen to be equal. This collapsing behavior exists specifically for vertical margins between certain block elements, and is meant to produce more visually consistent spacing between elements like paragraphs and headings, matching typographic conventions where you generally want one consistent gap between elements rather than the sum of two separately-specified margins stacking up unpredictably. It's worth noting this collapsing doesn't happen for horizontal margins, or for elements that are flex or grid items, which is why the same-looking margin values can behave quite differently depending on the surrounding layout context.

Exercises

MediumPractice using Margin in a real scenario.

View Solution

.card {
  margin: 20px;
}

Frequently Asked Questions

Why do two stacked <div> elements with margin-bottom: 20px and margin-top: 20px end up with only 20px of space between them, not 40px?▼

Related Functions

PaddingBox-sizingRefDimensions