CSS padding

The CSS padding property is used to create space or gap between the border and the content of specified element. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .a, .b{border: 2px solid red;}
      .b{padding: 24px;}
   </style>
</head>
<body>
   
   <div class="a">
      Without padding
   </div>

   <br/>
   
   <div class="b">
      With padding of 24px
   </div>
   
</body>
</html>

Output

Without padding

With padding of 24px

Padding is basically the space available around the content and inside the border of an element. Consider the following figure, to understand where the padding actually lies:

If an element has not any border defined to it, then also, padding is created around the element. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{padding: 62px;}
   </style>
</head>
<body>
   
   <div>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit.
   </div>
   
</body>
</html>

Output

Lorem ipsum dolor sit amet consectetur, adipisicing elit.

CSS padding Syntax

The syntax of padding property in CSS, is:

padding: padding-top padding-right padding-bottom padding-left;

Therefore, the padding property can also be called/used as shorthand for these padding properties:

padding-top - used to create top padding
padding-right - used to create right padding
padding-bottom - used to create bottom padding
padding-left - used to create left padding

Note - All these padding values are defined using length units. Also, either we can use single value or multiple (upto 4) values to define the padding property.

CSS padding with Four Values

First value should apply to top padding
Second value should apply to right padding
Third value should apply to bottom padding
Fourth value should apply to left padding

For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p{border: 2px solid crimson; padding: 20px 40px 10px 60px;}
   </style>
</head>
<body>
   
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium
      nulla eius rerum, animi, tenetur blanditiis iure inventore quia est
      ipsum minima repellendus dolore beatae illo totam consequuntur ullam
      accusantium laudantium numquam earum voluptates quis?</p>
   
</body>
</html>

Output

Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium nulla eius rerum, animi, tenetur blanditiis iure inventore quia est ipsum minima repellendus dolore beatae illo totam consequuntur ullam accusantium laudantium numquam earum voluptates quis?

CSS padding with Three Values

First value should apply to top padding
Second value should apply to right and left padding
Third value should apply to bottom padding

For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p{border: 2px solid crimson; padding: 20px 60px 10px;}
   </style>
</head>
<body>
   
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium
      nulla eius rerum, animi, tenetur blanditiis iure inventore quia est
      ipsum minima repellendus dolore beatae illo totam consequuntur ullam
      accusantium laudantium numquam earum voluptates quis?</p>
   
</body>
</html>

Output

CSS padding with Two Values

First value should apply to top and bottom padding
Second value should apply to right and left padding

For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p{border: 2px solid crimson; padding: 20px 60px;}
   </style>
</head>
<body>
   
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium
      nulla eius rerum, animi, tenetur blanditiis iure inventore quia est
      ipsum minima repellendus dolore beatae illo totam consequuntur ullam
      accusantium laudantium numquam earum voluptates quis?</p>
   
</body>
</html>

Output

CSS padding with One Value

The value should apply to top, right, bottom, and left padding, or in short for all sides. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p{border: 2px solid crimson; padding: 60px;}
   </style>
</head>
<body>
   
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium
      nulla eius rerum, animi, tenetur blanditiis iure inventore quia est
      ipsum minima repellendus dolore beatae illo totam consequuntur ullam
      accusantium laudantium numquam earum voluptates quis?</p>
   
</body>
</html>

Output

Note - We can also use initial and inherit keyword to define the padding property.

The initial keyword is used to use the default value. Whereas the inherit keyword is used when we need to use the value inherited by the parent element.

Note - Negative values are not allowed to define the padding property in CSS.

Padding Vs Margin - I've differentiated these two properties of CSS, in its separate tutorial.

CSS Online Test

« Previous Tutorial Next Tutorial »