What is padding property of CSS

CSS Padding Property is used to define the space between the element content and the element border.

It is different from CSS margin in the way that CSS margin defines the space around elements. CSS padding is affected by the

background colors. It clears an area around the content.

Top,bottom, left and right padding can be changed independently using separate properties. You can also change all properties at once by using shorthand padding property.

The padding-bottom Property

The Padding-bottom property sets the bottom padding (space) of an element. This can take a value in terms of length of %.

Her is an example:

<html>
    <head>
    </head>

    <body>
        <p style = "padding-bottom: 15px; border:1px solid black;">
           This is a paragraph with a specified bottom padding
        </p>

        <p style = "padding-bottom: 5%; border:1px solid black;">
           This is another paragraph with a specified bottom padding in percent
        </p>
       </body>
    </html>

It will produce the following result:

The Padding-top Property

The Padding-top property sets the top padding (space) of an element. This can take a value in terms of length of %

Here is an example

<html>
    <head>
    </head>

     <body>  
        <p style = "padding-top: 15px; border:1px solid black,">
           This is a paragraph with a specified top padding
        </p>

        <p style = "padding-top: 5%; border:1px solid black;">
           This is another paragraph with a specified top padding in percent 
        </p>
  </body>
</html>
     

It will Produce the following result:

The padding-left Property

The padding-left property sets the left padding (space) of an element. This can take a value in terms of length of %.

Here is an example:

<html>
    <head>
    </head>

     <body>
         <p style = "padding-left: 15px; border:1px solid black;">
          This is a paragraph with a specified left padding
          </p>

         <p style= "padding-left: 15% border:1px solid black;">
            This is another paragraph with a specified left padding in percent
         </p>
        </body>
        </html>

It will produce the following result:

The padding-right property

The padding-right property sets the right padding (space) of an element. This can take a value in terms of length of 0%.

Here us an example:

<html>
    <head>
    </head>

     <body>
        <p style = "padding-right: 15px; border:1px solid black;">
           This is a paragraph with a specified right padding
        </p>

        <p style> = "padding-right: 5%; border:1px solid black;">
           This is another paragraph with a specified right padding in percent
        </p>
      </body>
     </html>



     

It will produce the following result:

The Padding Property

The padding property sets the left, right top and bottom padding (space) of an element. This can take a value in terms of length of %.

Here is an example:

<html>
   <head>
   </head>

    <body>
       <p style = "padding: 5px; border:1px solid black;">
          all four padding will be 15px
        </p>

       <p style= "padding: 10px 2%; border:1px solid black;">
          top and bottom padding will be 10px, left and right
          paddding will be 2% of the total width of the document.
       </p>

       <p style ="padding: 10px 2% 10px; border:1px solid black;">
          top padding will be 10px, left and right padding will 
          be 2% of the total width of the document, bottom padding will be
       </p>

       <p style = "padding: 10px 2% 10px 10px; border: 1px solid black;">
          top padding will be 10px, right padding will be 2% of 
          the total width of the document, bottom padding and top padding will be
       </p>
     </body>
   </html>

It will produce the following result:

Leave a Reply

Your email address will not be published. Required fields are marked *