A paragraph of text that has blue margin on it, following the heading with margin.
h1 {
margin-bottom: 2rem;
}
p {
margin-top: 3rem;
}
At first glance,
you would be forgiven for thinking that the paragraph will be spaced `5em` from the heading,
because `2rem` and `3rem` combined calculate to `5rem`.
Because **vertical margin collapses** , though, the space is actually `3rem`.
Margin collapse works by selecting the largest value of two adjoining elements
with vertical margin set on the adjoining sides.
The bottom of the `h1` meets the top of the `p`,
so the largest value of the `h1`'s bottom margin and the `p`'s top margin is selected.
If the `h1` were to have `3.5rem` of bottom margin,
the space between them both would then be `3.5rem` because that is larger than `3rem`.
Only block margins collapse, not inline (horizontal) margins.
> [!NOTE]
> **Note:** This behavior is rooted back to when the web was mostly just documents. Collapsing margins help to set consistent spacing between elements without accidentally creating huge gaps between elements that also have margin defined.
Margin collapse also helps with empty elements.
If you have a paragraph that has a top and bottom margin of `20px`,
it will only create `20px` of space: not `40px`.
If *anything* is added to the inside of this element though,
including `padding`, its margin will no longer collapse in itself and will be treated as any box with content.
### Check your understanding
Test your knowledge of margin collapsing
If two elements stacked on top of each other both have 20px of top margin
and 30px of bottom margin, how much space will there be between them?
10px Try again! 20px Not quite 30px CSS will take the larger of the margin spaces between elements yep! 40px Try again!
#### Preventing margin collapse
If you make an element absolutely positioned,
using `position: absolute`, the margin will no longer collapse.
The margin also won't collapse if you use the `float` property, too.
If you have an element with no margin between two elements with block margin,
the margin won't collapse either,
because the two elements with block margin are no longer adjacent siblings: they are just siblings.
In the [layout lesson](https://web.dev/learn/css/layout),
you learned that flexbox and grid containers are very similar to block containers,
but handle their child elements very differently.
This is the case with margin collapse, too.
If we take the original example from the lesson and apply flexbox with column direction,
the margins are combined,
instead of collapsed.
This can provide predictability with layout work,
which is what flexbox and grid containers are designed for.
Margin and margin collapse can be tricky to understand,
but understanding how they work, in detail, is very useful,
so [this detailed explainer](https://www.smashingmagazine.com/2019/07/margins-in-css)
is strongly recommended.
## Padding
Instead of creating space on the outside of your box,
like `margin` does,
the `padding` property creates space on the **inside** of your box instead:
like insulation.
Depending on which box model you are using---which was covered back in the
[box model lesson](https://web.dev/learn/css/box-model)
---`padding` can also affect the overall dimensions of the element too.
The `padding` property is shorthand for `padding-top`, `padding-right`, `padding-bottom` and `padding-left`.
Just like `margin`, `padding` has logical properties, too:
`padding-block-start`, `padding-inline-end`, `padding-block-end` and `padding-inline-start`.
## Positioning
Also covered in the [layout](https://web.dev/learn/css/layout) module,
if you set a value for `position` that is anything other than `static`,
you can space elements with the `top`, `right`, `bottom` and `left` properties.
There are some differences with how these directional values behave:
- An element with `position: relative` will maintain its place in the document flow, even when you set these values. They will be relative to your element's position too.
- An element with `position: absolute` will base the directional values from the relative parent's position.
- An element with `position: fixed` will base the directional values on the viewport.
- An element with `position: sticky` will only apply the directional values when it is in its docked/stuck state.
In the [logical properties](https://web.dev/learn/css/logical-properties) module,
you learn about the `inset-block` and `inset-inline` properties,
which allow you to set directional values that honor writing mode.
Both properties are shorthands combining the `start` and `end` values
and as such accept either one value to be set for `start` and `end` or
two individual values.
## Grid and flexbox
Lastly, in both grid and flexbox you can use the `gap` property to create space *between* child elements.
The `gap` property is shorthand for `row-gap` and `column-gap`,
it accepts one or two values, which can be lengths or percentages.
You can also use keywords such as `unset`, `initial` and `inherit`.
If you define only one value,
the same `gap` will be applied to both the rows and columns,
but if you define both values,
the first value is `row-gap` and the second value is `column-gap`.
With both flexbox and grid, you can also create space using their distribution and alignment capabilities,
which we cover in the
[grid module](https://web.dev/learn/css/grid) and
[flexbox module](https://web.dev/learn/css/flexbox).
## Creating consistent spacing
It is a really good idea to choose a strategy and stick with it
to help you create a consistent user interface that has good flow and rhythm.
A good way to achieve this is use consistent measures for your spacing.
For example, you could commit to using `20px`
as a consistent measure for all gaps between elements---known as gutters---so
all layouts look and feel consistent.
You could also decide to use `1em` as the vertical spacing between flow content,
which would achieve consistent spacing based on the element's `font-size`.
Whatever you choose,
you should save these values as variables (or CSS custom properties)
to tokenize those values and make the consistency a bit easier.
:root {
--gutter: 20px;
--spacing: 1em;
}
h1 {
margin-left: var(--gutter);
margin-top: var(--spacing);
}
Using custom properties like this allows you to define them once,
then use them throughout your CSS.
When they are updated,
either locally within an element or globally,
the values will pass down through the cascade and the updated values will be reflected.
### Check your understanding
Test your knowledge of spacing
It's safe to use HTML for spacing when...
It's only one. Try again! No one will notice. Try again! It's just for space. Try again! It helps with the understanding of the document. You got it! To create space **inside** a box, use...
Margin Margin is for pushing outside of a box. HTML These are for spacing and dividing content. Gap Gap is for spacing between boxes. Padding Padding is for creating space inside of a box. To create space **outside** a box, use...
Margin Margin is for pushing outside of a box. HTML These are for spacing and dividing content. Gap Gap is for spacing between boxes. Padding Padding is for creating space inside of a box. To create space **between** boxes, use...
Margin Margin is for pushing outside of a box. HTML These are for spacing and dividing content. Gap Gap is for spacing between boxes. Padding Padding is for creating space inside of a box.