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


  1. User Avatar
    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. User Avatar
    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.

    overflow: hidden;
    margin: 0;
    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;}
    • User Avatar
      Permalink to comment#

      it seems your browser is adding your padding values to its own default values, giving you more padding than you asked for :p you should try normalize.css

  3. User Avatar
    Permalink to comment#

    Thank you
    I had learned lot

  4. User Avatar
    Permalink to comment#

    Thanks for nice article. I have one question regarding padding; what will be box size if I used following code(just for testing)? And WHY?

    .box {
     padding: 500px;
     width: 400px;
     box-sizing: border-box;
  5. User Avatar
    Rahul Kumar
    Permalink to comment#

    Great Article, I got most of the things about using css padding.

    I saw a very helpful tutorial on youtube:

  6. User Avatar
    Richard Karamon

    I am looking for the explanation of the CSS syntax that I found in one of the style sheets. It looks like this, padding-%AlignStart: 20px;
    Is this %AlignStart a variable here? Where does it come from, HTML? I did not know that we can pass variables to CSS like that? Did you see a book or a tutorial on the web, that explains this syntax? Here is the full code.

    #pthdr2container #pthdr2home {
    background: url(%Image(PT_HEADERLINK_HOME_ALT)) no-repeat scroll %AlignStart center transparent;
    padding-%AlignStart: 22px;

  7. User Avatar
    Yanakorn Chaeyprasert
    Permalink to comment#

    On a normal day of making website, my box model error occur, it seems that i can’t type a shorthanded code, it’s just show the error that invalid value, can you fix?

    body {
      font-family: "Crystal","Noto Sans", sans-serif;
    header {
      display: inline-block;
      padding-left: 15%;
      padding-right: 15%;
      error occur when i do:
      padding: 0, 15%;
      which results as not working, why?
    #logo {
      width: 30%;
      height: auto;
      padding: auto, 35%; /* Not working here, too */
  8. User Avatar
    Permalink to comment#

    How can i make top h1 by css without using negative value or margin
    anyone can help me on this one
    Thanks in advance

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.