CSS Padding

❮ Prev Next ❯

The paddingCSS property is commonly used in CSS to add space in the inner side of an element.

Remember:

  • margin adds space outside an element border
  • padding adds space inside an element border

Specific margin properties

padding has 4 related properties that alter the padding of a single edge at once:

  • padding-top
  • padding-right
  • padding-botton
  • padding-left

The usage of those is very simple and cannot be confused, for example: 

p {
  padding-left :30px;
  padding-right :3em;
}

Using the margin shorthand

padding is a shorthand to specify multiple padding values at the same time, and depending on the number of values entered, it behaves differently.

Using 1 value

Using a single value applies that to all the padding: top, right, bottom, left. 

p {
  padding :20px;
}

Using 2 value

Using 2 values applies the first to top & bottom, and the second to left & right. 

p {
  padding :20px 10px;
}

Using 3 value

Using 3 values applies the first to top, the second to left & right, the third to bottom. 

p {
  padding :20px 10px 30px;
}

Using 4 value

Using 4 values applies the first to top, the second to right, the third to left, the fourth to bottom 

p {
  padding :20px 10px 5px 0px;
}

So, the order is top-right-bottom-left.

Values accepted

padding accepts values expressed in any kind of length unit, the most common ones are px, em, rem.

Example 

<!DOCTYPE HTML>
<html>
    <head>
      <style>
        .value-1{
          border:2px solid blue;
          padding:30px;
        }
        .value-2{
          border:2px solid purple;
          padding:30px 20px;
        }
        .value-3{
          border:2px solid green;
          padding:30px 20px 10px;
        }
        .value-4{
          border:2px solid brown;
          padding:30px 20px 10px 0px;
        }
      </style>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
      <div> 
        <h3>welcome to Coding Koleji </h3>
        <p class="value-1">1 value</p>
        <p class="value-2">2 value</p>
        <p class="value-3">3 value</p>
        <p class="value-4">4 value</p>
      </div>
    </body>
  </html>
❮ Prev Next ❯