How to add padding properties in CSS?

margins in CSS

Padding in CSS

When there is need to increase or decrease the space between content of an HTML element and its border, the padding properties of CSS come into action. You have full control over padding using CSS. These properties are used to give space between the content of an HTML element and its border. When you create your document, the browser represents each element as a rectangular box which is shown above and it explains, How to set padding properties in CSS?

The area coloured as green in above image is actually the content area where text, images and video players are kept. Saffron colour area represents padding of an element and outside to this padding area, there is border area and finally outside the border area, comes a margin area.

The padding of an element has four sides to set as per your requirement, top, bottom, left and right padding. Therefore, you can apply the following padding properties to your program.

  1. padding: It is the shorthand property and can be applied in one declaration only.
  2. padding-top: It declares padding for top side only.
  3. padding-right: It declares padding for right side only.
  4. padding-bottom: It declares padding for bottom side only.
  5. padding-left: It declares padding for left side only.

The padding property in CSS

The padding property in CSS applies padding to all four sides in one declaration only. Let us take an example, How to add padding properties in CSS?

<html>
   <head>
   <style>
   p#p1{
       border-width:3px; 
       border-style:solid;
       border-color:red;
       padding:20px;
       width:25%;
       }
   p#p2{
       border-width:5pt; 
       border-style:solid;
       border-color:green;
       padding:3%;
       width:25%;
       }
   </style>
   </head>
   <body>
      <p ID ="p1">
         First para with padding is set as 20px.
      </p>
      <p ID ="p2">
         Second para with padding is set as 3%.
      </p>
   </body>
</html>        
The padding property, www.programmingtutorial.in

The padding-top property in CSS

This property allows you to set padding from top to the content of an element. It can be in pixels, % or it can be set as auto. Let us take an example in the form of a code.

<html>
   <head>
   <style>
   p#p1{
       border-width:3px; 
       border-style:solid;
       border-color:red;
       padding-top:100px;
       width:25%;
       }
   p#p2{
       border-width:5pt; 
       border-style:solid;
       border-color:green;
       padding-top:3%;
       width:25%;
       }
   </style>
   </head>
   <body>
      <p ID ="p1">
         First para with top padding is set as 100px.
      </p>
      <p ID ="p2">
         Second para with top padding is set as 3%.
      </p>
   </body>
</html>  
The padding-top property in CSS, www.programmingtutorial.in

The padding-right property in CSS

This property allows you to set padding from the right side of border to the content of an element. It can be in pixels, % or it can be set as auto. Let us take an example in the form of a code.

<html>
   <head>
   <style>
   p#p1{
       border-width:3px; 
       border-style:solid;
       border-color:red;
       padding-right:100px;
       width-left:25%;
       text-align:right;
       }
   p#p2{
       border-width:5pt; 
       border-style:solid;
       border-color:green;
       padding-right:3%;
       width-left:25%;
       text-align:right;
       }
   </style>
   </head>
   <body>
      <p ID ="p1">
         First para with padding-right is set as 100px.
      </p>
      <p ID ="p2">
         Second para with padding-right is set as 3%.
      </p>
   </body>
</html> 
The padding-right property in CSS, www.programmingtutorial.in

The padding-bottom property in CSS

This property allows you to set padding from the bottom of border to the content of an element. It can be in pixels, % or it can be set as auto. Let us take an example in the form of a code.

<html>
   <head>
   <style>
   p#p1{
       border-width:3px; 
       border-style:solid;
       border-color:red;
       padding-bottom:100px;
       width:30%;
       }
   p#p2{
       border-width:5pt; 
       border-style:solid;
       border-color:green;
       padding-bottom:5%;
       width:30%;
       }
   </style>
   </head>
   <body>
      <p ID ="p1">
         First para with padding-bottom is set as 100px.
      </p>
      <p ID ="p2">
         Second para with padding-bottom is set as 5%.
      </p>
   </body>
</html>   
The padding-bottom property in CSS, www.programmingtutorial.in

The padding-left property in CSS

This property allows you to set padding from the left side of border to the content of an element. It can be in pixels, % or it can be set as auto. Let us take an example in the form of a code.

<html>
   <head>
   <style>
   p#p1{
       border-width:3px; 
       border-style:solid;
       border-color:red;
       padding-left:100px;
       width:30%;
       }
   p#p2{
       border-width:5pt; 
       border-style:solid;
       border-color:green;
       padding-left:3%;
       width:30%;
       }
   </style>
   </head>
   <body>
      <p ID ="p1">
         First para with padding-left is set as 100px.
      </p>
      <p ID ="p2">
         Second para with padding-left is set as 3%.
      </p>
   </body>
</html> 
The padding-left property in CSS, www.programmingtutorial.in

To run code, copy code and paste it in notepad and open with browser.