padding
Quick Summary for padding
The padding CSS shorthand property sets the padding area on all four sides of an element at once.
Code Usage for padding
/* Apply to all four sides */ padding: 1em;  /* vertical | horizontal */ padding: 5% 10%;  /* top | horizontal | bottom */ padding: 1em 2em 2em;  /* top | right | bottom | left */ padding: 5px 1em 0 2em;  /* Global values */ padding: inherit; padding: initial; padding: revert; padding: unset; 
More Details for padding

padding

The padding CSS shorthand property sets the padding area on all four sides of an element at once.

An element's padding area is the space between its content and its border.

Note: Padding creates extra space within an element. In contrast, margin creates extra space around an element.

Constituent properties

This property is a shorthand for the following CSS properties:

padding-bottom padding-left padding-right padding-top

Syntax

/* Apply to all four sides */ padding: 1em;  /* vertical | horizontal */ padding: 5% 10%;  /* top | horizontal | bottom */ padding: 1em 2em 2em;  /* top | right | bottom | left */ padding: 5px 1em 0 2em;  /* Global values */ padding: inherit; padding: initial; padding: revert; padding: unset; 

The padding property may be specified using one, two, three, or four values. Each value is a <length> or a <percentage>. Negative values are invalid.

When one value is specified, it applies the same padding to all four sides. When two values are specified, the first padding applies to the top and bottom, the second to the left and right. When three values are specified, the first padding applies to the top, the second to the right and left, the third to the bottom. When four values are specified, the paddings apply to the top, right, bottom, and left in that order (clockwise).

Values

<length>

The size of the padding as a fixed value.

<percentage>

The size of the padding as a percentage, relative to the width of the containing block.

Formal definition

Initial valueas each of the properties of the shorthand:padding-bottom: 0padding-left: 0padding-right: 0padding-top: 0
Applies toall elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column. It also applies to ::first-letter and ::first-line.
Inheritedno
Percentagesrefer to the width of the containing block
Computed valueas each of the properties of the shorthand:padding-bottom: the percentage as specified or the absolute lengthpadding-left: the percentage as specified or the absolute lengthpadding-right: the percentage as specified or the absolute lengthpadding-top: the percentage as specified or the absolute length
Animation typea length

Formal syntax

[ <length> | <percentage> ]{1,4}

Examples

Setting padding with pixels

HTML
<h4>This element has moderate padding.</h4> <h3>The padding is huge in this element!</h3> 
CSS
h4 {   background-color: lime;   padding: 20px 50px; }  h3 {   background-color: cyan;   padding: 110px 50px 50px 110px; } 
Result

Setting padding with pixels and percentages

padding: 5%;                /* All sides: 5% padding */  padding: 10px;              /* All sides: 10px padding */  padding: 10px 20px;         /* top and bottom: 10px padding */                             /* left and right: 20px padding */  padding: 10px 3% 20px;      /* top:            10px padding */                             /* left and right: 3% padding   */                             /* bottom:         20px padding */  padding: 1em 3px 30px 5px;  /* top:    1em padding  */                             /* right:  3px padding  */                             /* bottom: 30px padding */                             /* left:   5px padding  */ 

Specifications

Specification
CSS Box Model Module Level 3 # padding-shorthand

See also

Introduction to the CSS basic box model padding-top, padding-right, padding-bottom, and padding-left. The mapped logical properties: padding-block-start, padding-block-end, padding-inline-start, and padding-inline-end and the shorthands padding-block and padding-inline

Last modified: Aug 12, 2021, by MDN contributors

Select your preferred language English (US)DeutschEspañolFrançais日本語한국어Português (do Brasil)Русский中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
Even if you fall on your face, you're still moving forward.
Victor Kiam
Random CSS Property

text-decoration

The text-decoration shorthand CSS property sets the appearance of decorative lines on text. It is a shorthand for text-decoration-line, text-decoration-color, text-decoration-style, and the newer text-decoration-thickness property.
text-decoration css reference