CSS Padding Example

First Page
Next Page

CSS Padding Example

  • padding-top example
  • padding-bottom example
  • padding-left example
  • padding-right example

Padding-top Property Example

<!DOCTYPE HTML>
<html>
   <head>
      <title>Padding Top Property Example</title>
      <style>
         p.padding {
            padding-top: 2cm;
         }

         p.padding2 {
            padding-top: 40%;
         }
      </style>
   </head>
   <body>
      <p class="padding">Wellcome to My Website. My Name is Ammu. I Live in Telangana.</p>
      <p class="padding2">Wellcome to My Website. My Name is Ammu. I Live in Telangana.</p>
   </body>  
</html>

Output

Padding-bottom Property Example

<!DOCTYPE HTML>
<html>
   <head>
      <title>Padding Bottom Property Example</title>
      <style>
         p.padding {
            padding-bottom: 2cm;
         }

         p.padding2 {
            padding-bottom: 40%;
         }
      </style>
   </head>
   <body>
      <p class="padding">Wellcome to My Website. My Name is Ammu. I Live in Telangana.</p>
      <p class="padding2">Wellcome to My Website. My Name is Ammu. I Live in Telangana.</p>
   </body>  
</html>

Output

Padding-left Property Example

<!DOCTYPE HTML>
<html>
   <head>
      <title>Padding Left Property Example</title>
      <style>
         p.padding {
            padding-left: 2cm;
         }

         p.padding2 {
            padding-left: 40%;
         }
      </style>
   </head>
   <body>
      <p>Wellcome to My Website. My Name is Ammu. I Live in Telangana.</p>
      <p class="padding">Wellcome to My Website. My Name is Ammu.</p>
      <p class="padding2">Wellcome to My Website. My Name is Ammu.</p>
   </body>  
</html>

Output

Padding-right Property Example

<!DOCTYPE HTML>
<html>
   <head>
      <title>Padding Right Property Example</title>
      <style>
         p.padding {
            padding-right: 2cm;
         }

         p.padding2 {
            padding-right: 40%;
         }
      </style>
   </head>
   <body>
      <p>Wellcome to My Website. My Name is Ammu. I Live in Telangana.</p>
      <p class="padding">Wellcome to My Website. My Name is Ammu.</p>
      <p class="padding2">Wellcome to My Website. My Name is Ammu.</p>
   </body>  
</html>

Output

First Page
Next Page