DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 967,911 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Alignment in CSS: margin & padding
Thomas C. Haflich
Thomas C. Haflich

Posted on

Alignment in CSS: margin & padding

Cover photo by Annie Spratt on Unsplash

First, take a look at this tweet:

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.

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:


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%;
}
Enter fullscreen mode Exit fullscreen mode

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%;
}
Enter fullscreen mode Exit fullscreen mode

Animated GIF of a bearded man doing complex mental mathematics. The camera zooms in on his eyes for dramatic effect.

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.

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.