CSS Margins Example

First Page
Next Page

CSS Margins Example

  • margins-top example
  • margins-bottom example
  • margins-left example
  • margins-right example

Margins-top Property Example

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

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

Output

Margins-bottom Property Example

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

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

Output

Margins-left Property Example

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

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

Output

Margins-right Property Example

<!DOCTYPE HTML>
<html>
   <head>
      <title>Margins Right Property Example</title>
      <style>
         p.margin {
            margin-right: 10cm;
         }

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

Output

First Page
Next Page