CSS Reference Guide: padding

The CSS padding shorthand property is used to create space within an element. It defines the content portion of the box model.

Jump ahead:

• Demo
• Syntax
• Values
  • One value
  • Two values
  • Three values
  • Four values
  • Centering elements
  • Negative values

The padding property can be specified using lengths, percentages, and keywords such as auto. It can also accept negative values.

Demo

See the Pen
CSS Padding Example by Solomon Eseme (@kaperskyguru)
on CodePen.

Syntax

div {
  padding: <length> | <percentage> | auto
}

The CSS padding shorthand property is used to define up to four values for padding-top, padding-right, padding-left, and padding-bottom.

div {
  padding: 2px 3px 4px 5px;
}

The equivalent padding can be defined as below:

div {
 padding-top: 2px;
 padding-right: 3px;
 padding-left: 5px;
 padding-bottom: 4px;
}

Values

The padding property can accept one to four values.

One value

When one value is supplied to the CSS padding shorthand property, it applies the same padding value to all four sides.

div {
  padding: 5px;
}
 // SAME AS
div {
 padding-top: 5px;
 padding-right: 5px;
 padding-left: 5px;
 padding-bottom: 5px;
}

Two values

When two values are specified to the padding property, the first value is applied to the top and bottom padding, while the second is applied to the left and right.

div {
  padding: 5px 3px;
}
 // SAME AS
div {
 padding-top: 5px;
 padding-right: 3px;
 padding-left: 3px;
 padding-bottom: 5px;
}

Three values

When three values are supplied, the first value is applied to the top padding; the second value is applied to the left and right padding; and the third value is applied to the bottom padding.

We made a custom demo for .
No really. Click here to check it out.

Click here to see the full demo with network requests

div {
  padding: 5px 3px 1px;
}
 // SAME AS
div {
  padding-top: 5px;
  padding-right: 3px;
  padding-left: 3px;
  padding-bottom: 1px;
}

Four values

When four values are supplied, the values are applied in clockwise order. In other words: the first value is applied to the top padding; the second value is applied to the right padding; the third value is applied to the bottom; and the fourth the value is applied to the left padding.

div {
  padding: 5px 3px 1px 6px;
}
 // SAME AS
div {
  padding-top: 5px;
  padding-right: 3px;
  padding-left: 6px;
  padding-bottom: 1px;
}

Centering elements

With the use of the auto keyword, it is very easy to center elements in the container using the padding property.

div {
  padding: 2em auto;  /* top and bottom: 2em padding   */
                    /* Box is horizontally centered */
}

div {
  padding: auto;    /* top and bottom: 0 padding     */
                  /* Box is horizontally centered */
}

Negative values

When negative values are supplied to the padding, they pull the element in a particular direction rather than push it.

For example, the snippet below will pull the element towards the top by 5px, towards the right by 3px, towards the left by 6px, and towards the bottom by 1px.

div {
  padding: -5px -3px -1px -6px;
}

Is your frontend hogging your users' CPU?

As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.https://logrocket.com/signup/

LogRocket is like a DVR for web apps, recording everything that happens in your web app or site. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.

Modernize how you debug web apps — Start monitoring for free.