The CSS padding
shorthand property is used to create space within an element. It defines the content portion of the box model.
Jump ahead:
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.
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.
LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. 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 and mobile apps — Start monitoring for free.