How to use the CSS Padding Property

Learn how to use the CSS padding property.

The CSS padding property is used to control the amount of space inside HTML elements between its content and border.

CSS Padding basics

Here’s a button element with a text label (its content):

<button>Button</button>

Let’s give the button a padding value of 24px:

button {
    padding: 24px;
}

Result:

If you change the padding value to 0 you get this:

There are five different padding properties in CSS:

• padding-top
• padding-right
• padding-bottom
• padding-left
• padding (the one we just used)

The first four padding properties (-top, -right, -bottom, -left) are individual, single-direction properties that can only add padding to one side.

The last one, padding, is a so-called shorthand property, and it’s the most flexible and most used of the five padding properties.

Let’s explore the padding property a bit more.

How to use the Padding shorthand

The shorthand padding property (the only one we’ve used so far) can add multiple padding values at the same (one, two, three, or four values).

Let’s look at some examples.

One value padding shorthand

In the 24px padding button example earlier, you could have done this in your CSS:

button {
    padding-top: 24px;
    padding-right: 24px;
    padding-bottom: 24px;
    padding-left: 24px;
}

But that’s a waste of time when you can target all four sides at once using the one value padding shorthand:

button { 
    padding: 24px;
}

Two value padding shorthand

What if you only want to add 16px padding to the top and bottom, but 24px padding on the left and right side?

You could do this (the time-consuming way):

button {
    padding-top: 16px; 
    padding-right: 24px;
    padding-bottom: 16px;
    padding-left: 24px; 
}

Or use your good friend, the two value padding shorthand:

button {
    padding: 16px 24px;
}

When you use the padding property with two values like above:

• The first value targets both the top and bottom padding
• The second value targets both the left and right padding

Result:

Three value padding shorthand

When you use the padding property with three values, such as:

button {
    padding: 12px 24px 8px;
}

• The first value is top padding
• The second value is both left and right padding
• The third value is bottom padding

Result:

Four value padding shorthand

When you use the padding property with four values, such as:

button {
    padding: 12px 16px 12px 16px;
}

• The first value is top padding
• The second value is right padding
• The third value is bottom padding
• The fourth value is left padding

When to use single-direction padding properties?

The shorthand padding property kicks the single-direction padding properties asses in terms of flexibility and efficiency.

So why would you for example use:

padding-left: 24px;

If you can use the shorthand below to get the same result?

padding: 0 0 0 24px; /* top: 0, right: 0, bottom: 0, left: 24px */

The main reason to use single-direction padding properties if for whatever reason you only want to add specific padding to one side of an element, and leave the three other sides’ padding values up to whatever their default/current padding values are (which depends on your setup).

However, let’s say that you only want padding on the left side of an element, but zero paddings on the top, right, bottom. To do that using the single-direction padding properties, your code has to be written like this so that any existing padding values on the top, right, and bottom are overridden:

padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 24px

Now the above is an awful amount of code for something that can be written on one line using the shorthand padding property:

padding: 0 0 0 24px; /* top, right, bottom, left */

What are these default/current padding values that I’m talking about?

I’m referring to styles either inherited from:

• The User Agent Stylesheet
• A CSS library or framework
• Or any other style declarations added by yourself at the top of your CSS stylesheet (remember, CSS cascades).

For example, if the current padding on your button element looks like this (regardless of where it comes from):

button {
    padding-top: 16px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 16px
}

And you create a button class that only addresses the padding top value:

.button-login {
    padding-top: 40px;
}

And add it to a button element:

<button class="button-login">Login</Button>

Then your login button will look like this:

Because again, the right, bottom, and left padding values are inherited from somewhere else.

As you can probably imagine, using the single-direction padding properties can cause confusion or unpredictable results, depending on how organized your specific CSS codebase is.

I rarely use single direction padding properties, because at the beginning of every new project I reset my padding values to zero, and then add padding values to my UI components (HTML elements) based on my project’s spacing scale.

This makes my workflow more predictable because I don’t have to worry about various styles passed down by X browser’s User Agent Stylesheet.

For all the reasons stated above, it’s overall more practical to use the shorthand padding method to define padding values — most of the time.

When in doubt, use the padding shorthand.

How to remember padding shorthands

The four value shorthand is the easiest to remember because values are added clockwise: top, right, bottom, left.

The two and three value shorthand are less obvious:

• Two value shorthand: 16px 8px (top-bottom, left-right)
• Three value shorthand: 8px 16px 4px (top, left-right, bottom)

Note: in practice, you’ll rarely need to use the three value shorthand, which to me, makes it not worth memorizing (use your brain capacity for something else). Look it up if you need to use it.

Acceptable padding length units

The padding properties accept all types of length units. The most common length units are, px, rem, em, %, vw, vh, inherit.

Note: I used pixel units px in this tutorial because it’s a more relatable unit type for beginners (which I assume most of you are). This is especially true if you come from a visual design background using Illustrator, Sketch, Figma, etc.

However, pixels are absolute units that have fixed lengths, so they don’t scale well.

Relative units, such as the aforementioned rem, em, %, vw, vh, are excellent at scaling, but they each go about it in different ways.

I mostly use rem for my padding values, but this is largely a matter of preference in this day and age where all modern browsers can process all unit types.

Performance optimization (optional reading)

For those of you who come from a performance optimization background, I know what you’re thinking:

“Is there performance difference/cost of using the padding shorthand as opposed to using single direction values?”

The answer is yes. However, it’s borderline impossible to predict which of the following two examples is overal most performant:

padding: 8px 12px 16px 20px;

padding-top: 8px;
padding-right: 12px;
padding-bottom: 16px;
padding-left: 20px;

You might think that the shorthand is the obvious most performant option, because it has less bytes (data) to process.

However, it all depends on what happens between development and production in terms of code processing (parsing, minifying, compiling) and how your project is configured and organized.

Any potential difference is so minuscule that it’s not worth worrying about. You need to pick your battles wisely, and when it comes to performance, you got much bigger fish to fry than padding properties.