Stop Using CSS Margin And Padding Shorthands. Use This Instead

Why the most common properties in web design became so complicated and what we can do to make space easier and less error prone

Lately I’ve started to share some CSS tips, like this and that. Today I’d like to tell you a little bit about what I think about margin and padding shorthands and why you shouldn’t use them.

We all love shortcuts. Shortcuts mean we can go faster into the desired place. I can’t find a better proof I like shortcuts too than that I’ve designed desk mats with keyboard shortcuts for IntelliJ IDEA and VSCode.

This article was brought to you thanks to 18k readers on Medium.

CSS also offers shorthands. Two commonly used shortcuts are these for margin and padding:

margin: 2px;
margin: 2px 4px;
margin: 2px 4px 6px;
margin: 2px 4px 6px 8px;

Shorthands for padding look like the same. It is hard to notice what these values mean. Before I’ll jump into it, just a reminder of full name properties:

margin-left: 2px;
margin-right: 4px;
margin-top: 6px;
margin-bottom: 8px;

The values I’ve provided in this example doesn’t correspond with the previous examples. Because shorthands have this structure:

margin: 2px (all margins); // SHORTHAND 4
margin: 2px (top and bottom) 4px (left and right); // SHORTHAND 3
margin: 2px (top) 4px (left and right) 6px (bottom); // SHORTHAND 2
margin: 2px (top) 4px (right) 6px (bottom) 8px (left); // SHORTHAND 1

With time you just start to remember this combinations. I sometimes forget it. That’s why the frontend package for Hinty contains a hint that displays them when I code.

For a long time, I quite enjoyed using the shorthands. Because you don’t have to write four lines of CSS, and you don’t have to write left, right, top and bottom all the time.

But things started to change. I was in not one, but multiple projects where I had to change designs, and these shorthands became somehow troubling.

Take for example this:

.main-div {
  background-color: blue;
}
.surrounding-div {
  background-color: pink;
  width: 100px;
  height: 40px;
}
.div {
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  background-color: orange;
  
  margin…