Grow your CSS skills. Land your dream job.

padding

Last updated on:

The padding property in CSS defines the innermost portion of the box model, creating space around an element's content, inside of any defined margins and/or borders.

Padding values are set using lengths or percentages, and cannot accept negative values. The initial, or default, value for all padding properties is 0.

Here's a simple example:

.box {
  padding: 0 1.5em 0 1.5em;
}

The example above is using the padding shorthand property, which accepts up to four values, shown here:

.box {
  padding: <padding-top> || <padding-right> || <padding-bottom> || <padding-left>
}

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:

.box {
  padding: 0 1.5em;
}

.box {
  padding: 0 1.5em 0 1.5em;
}

Thus, if only one value is defined, this sets all four padding properties to the same value:

.box {
  padding: 20px;
}

If three values are declared, it is padding: [top] [left-and-right] [bottom];.

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:

.box {
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
}

Padding and Element Width Calculations

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.)

For example:

.box {
    padding: 20px;
    width: 400px;
}

In this example, although the .box 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).

This happens in order to maintain 400px of content space, rather than 400px of total element width. Here's a Pen demonstrating this:

Check out this Pen!

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).

To resolve this issue, thus keeping the width at 400px no matter the amount of padding, you can use the box-sizing property:

.box {
 padding: 20px;
 width: 400px;
  box-sizing: border-box;
}

This causes the element to maintain its width while increasing the padding, thus decreasing the available content space. Here is a demonstration:

Check out this Pen!

Related Properties

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Yep Yep Yep Yep Yep Yep Yep

Comments

  1. Doron
    Permalink to comment#

    Hey! that’s an awesome website, I learned a lot from reading here.
    Wanted to know what about the padding and the margin properties?

    Thanks, great site, great content!

  2. Fin
    Permalink to comment#

    Thanks for this simple and nice article.

    Related to padding stuff I got something that occurred in my current project. This is the first time I encountered something like this. I set my padding : 5px. But my browser (I’m using chrome and FF) display it wrong, the top and bottom is to far longer than 5px. The left and right padding seems right.

    Could you tell me what is possible wrong in my CSS? Thanks.

    body{
    overflow: hidden;
    margin: 0;
    padding:0;}
    
    header{
    outline: 1px solid black;
    text-align: center;
    width: 100%;
    padding: 5px; }
    
    header span{
    display: inline-block;
    width: 60px;
    height: 60px;
    background: url("../images/logo.png") center center no-repeat;
    outline: 1px solid black;
    vertical-align: middle;
    padding: 0 20px 0 0;}
    
    header h1{
    font-family: "cubano";
    color: #e74c3c;
    font-size: 44px;}
    

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".