Alignment in CSS: margin & padding
Published: 2022-07-29 00:47:20

*Cover photo by Annie Spratt on Unsplash*

First, take a look at this tweet:

{% twitter 1163909018114580480 %}

That's basically what we're doing with this whole series!

## What are margins? What is padding? A quick review of the box model

CSS is basically rectangles inside other rectangles.

![CSS box model diagram. From outside in: Margin, border, padding, content.](https://upload.wikimedia.org/wikipedia/commons/7/7a/Boxmodell-detail.png)

*Sourced from [Wikimedia Commons](https://commons.wikimedia.org/wiki/File:Boxmodell-detail.png).*

> 💡 **Margins** define space around the element, **padding** creates space inside the element. They are separated by the **border**.

More reading on the box model:
* [MDN - The box model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#What_is_the_CSS_box_model)
* [StackOverflow - What is the difference between border-box and content-box in CSS?](https://stackoverflow.com/questions/44453391/what-is-the-difference-between-border-box-and-content-box-in-css)

---

## Percent-based margin & padding

Setting a percentage for left/right properties is easy enough:

```scss
/* The HORIZONTAL (left/right) properties */
#some-element {
  margin-left: 5%;
  margin-right: 5%;
  padding-left: 5%;
  padding-right: 5%;
}
```

This does basically what you would expect. 

But setting a percentage *height* is more complicated. Take a moment to guess what happens when you do this:

```scss
/* The VERTICAL (top/bottom) properties */
#some-element {
  margin-top: 5%;
  margin-bottom: 5%;
  padding-top: 5%;
  padding-bottom: 5%;
}
```

![Animated GIF of a bearded man doing complex mental mathematics. The camera zooms in on his eyes for dramatic effect.](https://media.giphy.com/media/eChf44Gyj2VrO/giphy.gif)

The margin and padding properties accept various formats, but [when a percent is specified, they use the width of the element](https://drafts.csswg.org/css-box-3/#propdef-margin). You can use this to make a [responsive perfect square](https://dev.to/tchaflich/a-width-responsive-perfect-square-in-pure-css-3dao), which is cool, but it's pretty annoying when all you want to do is vertically center something.

An interactive example:

{% codepen https://codepen.io/tchaflich/pen/BayrjrZ %}

> 💡 When specifying margin or padding in percent, the *logical width* is always used, even if the property specified was vertical (top or bottom).

---

## Negative margins

If a positive margin is saying to other elements, "give me *this* much personal space", a negative margin is saying "come this far *into* my personal space".

Let's take a look at some examples:

{% codepen https://codepen.io/tchaflich/pen/bGNvaGe %}

> 💡 There's no such thing as negative padding.

For more examples on using negative margins to align things vertically, check out the [Absolute Positioning](https://dev.to/tchaflich/alignment-in-css-absolute-positioning-2dhp) part of the series.

---

## Automatic margins

If you've looked for ways to center something in CSS, it's likely that you've seen `margin: 0 auto` before.

> 💡 This type of declaration ( `0 auto` ) is [CSS shorthand](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#Margin_and_Padding_Properties). It sets the top & bottom margins to zero, and the left & right margins to auto.

{% codepen https://codepen.io/tchaflich/pen/MWgZeOL %}

The idea is that in this case, the `auto` property is calculated as "fill remaining space". If the margin is set to auto on both the left *and* the right, it will divide the remaining space evenly. This effectively centers the element.

> 🚨 Auto-margins **do not work vertically**. There is no "remaining height" in this case, since page height can always expand infinitely. When a remaining space cannot be calculated, the auto-margin is evaluated as `0` (no margin). Automatic margins also only apply to block elements.