Alignment in CSS: margin & padding

Cover photo by Annie Spratt on Unsplash

First, take a look at this tweet:

Kathryn Grayson Nanz

@kathryngrayson

Today, a coworker said what I think is the world's most incredible description of what I've chosen to do for a living: "making rectangles fit into and alongside other rectangles, even in the face of Internet Explorer"

20:21 PM - 20 Aug 2019

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.

Sourced from Wikimedia Commons.

💡 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
• StackOverflow - 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:

/* 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:

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

The margin and padding properties accept various formats, but when a percent is specified, they use the width of the element. You can use this to make a responsive perfect square, which is cool, but it's pretty annoying when all you want to do is vertically center something.

An interactive example:

💡 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:

💡 There's no such thing as negative padding.

For more examples on using negative margins to align things vertically, check out the Absolute Positioning 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. It sets the top & bottom margins to zero, and the left & right margins to auto.

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.