{"id":14087,"date":"2011-09-05T21:00:43","date_gmt":"2011-09-06T04:00:43","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14087"},"modified":"2021-09-21T15:18:13","modified_gmt":"2021-09-21T22:18:13","slug":"padding","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/p\/padding\/","title":{"rendered":"padding"},"content":{"rendered":"

The padding<\/code> property in CSS defines the innermost portion of the box model<\/a>, creating space around an element’s content, inside of any defined margins and\/or borders.<\/p>\n

Padding values are set using lengths<\/a> or percentages, and cannot accept negative values. The initial, or default, value for all padding properties is 0<\/code>.<\/p>\n

Here’s a simple example:<\/p>\n

.box {\n  padding: 0 1.5em 0 1.5em;\n}<\/code><\/pre>\n
The example above is using the padding<\/code> shorthand property, which accepts up to four values, shown here:<\/p>\n
.box {\n  padding: <padding-top> || <padding-right> || <padding-bottom> || <padding-left>\n}<\/padding-left><\/padding-bottom><\/padding-right><\/padding-top><\/code><\/pre>\n
If fewer than four values are set, the missing values are assumed based on the ones that are defined. For example, the following two rule sets would get identical results:<\/p>\n
.box {\n  padding: 0 1.5em;\n}\n\n.box {\n  padding: 0 1.5em 0 1.5em;\n}<\/code><\/pre>\n
Thus, if only one value is defined, this sets all four padding properties to the same value:<\/p>\n
.box {\n  padding: 20px;\n}<\/code><\/pre>\n
If three values are declared, it is padding: [top] [left-and-right] [bottom];<\/code>.<\/p>\n
Any of the individual padding properties can be declared using longhand, in which case you would define only one value per property. So the previous example could be rewritten as follows:<\/p>\n
.box {\n  padding-top: 20px;\n  padding-right: 20px;\n  padding-bottom: 20px;\n  padding-left: 20px;\n}<\/code><\/pre>\n
Padding and Element Width Calculations<\/h4>\n
If an element has a specified width, any padding added to that element will add to the total width of the element. This is often an undesirable result, as it requires that an element’s width be recalculated each time the padding is adjusted. (Note that this also happens with height, but in most cases it is preferred not to give an element a set height.)<\/p>\n
For example:<\/p>\n
.box {\n    padding: 20px;\n    width: 400px;\n}<\/code><\/pre>\n
In this example, although the .box<\/code> element is given an explicit width of 400px, the actual rendered width of the element on the page will be 440px. This takes into account not only the 400px width, but also the 20px of left padding and the 20px of right padding (defined with padding shorthand in the previous example).<\/p>\n
This happens in order to maintain 400px of content space, rather than 400px of total element width. Here’s a Pen demonstrating this:<\/p>\n
<\/code>Check out this Pen!<\/a><\/pre>\n
This occurs in all in-use browsers, in standards mode, but will not occur in IE6 and IE7 in quirks mode (that is, on pages displayed in IE6 or IE7 where there is no doctype declared or where something else is happening to trigger quirks mode).<\/p>\n
To resolve this issue, thus keeping the width at 400px no matter the amount of padding, you can use the box-sizing<\/a><\/code> property:<\/p>\n
.box {\n padding: 20px;\n width: 400px;\n  box-sizing: border-box;\n}<\/code><\/pre>\n
This causes the element to maintain its width<\/a> while increasing the padding, thus decreasing the available content space. Here is a demonstration:<\/p>\n
<\/code>Check out this Pen!<\/a><\/pre>\n
Related Properties<\/h3>\n