fbpx
April 6, 2020
css margin
CSS

CSS MARGIN | Learn How to Design The Web Page Margin Using CSS

In this tutorial we will be looking at CSS margin and how you can structure them on your HTML web document using CSS. In our previous tutorial we looked at CSS borders and how you can design them using CSS styles. If you haven’t gone through the tutorial you can do so using the link below

Read previous tutorial on: CSS BORDER | Learn How To Design the Border of Web Pages With CSS

CSS MARGIN

The margin property is used to define the space around an element in a web document. When adjusting the margin of an element, it does not affect the child element. Below are the list of margin properties used to set the margins of an element and they include:

  • The margin
  • The margin-top
  • The margin-bottom
  • The margin-left
  • The margin-right

The margin

The margin property can be used to set the property of the four corners of the margin in one declaration. This simply means that we can have values set to margin and this will take effect on the four corners of the element margin.

Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .margins{
         border: red solid 1px;
         margin: 2px;
      }
      .margins1{
         border: green solid 1px;
         margin: 2px 4px;
      }
      .margins2{
         border: yellow solid 1px;
         margin: 2px 4px 6px;
      }
      .margins3{
         border: purple solid 1px;
         margin: 2px 4px 6px 8px;
      }
   </style>
  
   <title>Illustration of margin property</title>
</head>
<body>
   
   <p class="margins">
      The margin was applied to the four corners of the element using one value 2px
   </p>

   <p class="margins1">
      The margin was applied to the four corners of the element using 2px for top and bottom and 4px for left and right
   </p>

   <p class="margins2">
     The margin was applied to the four corners using 2px for top, 4px for right and left and 6px for bottom
   </p>

   <p class="margins3">
      The margin was applied to the four corners using 2px for top, 4px for right, 6px for left and 8px for bottom
   </p>
</body>
</html>

Result

Illustration of margin property

The margin was applied to the four corners of the element using one value 2px

The margin was applied to the four corners of the element using 2px for top and bottom and 4px for left and right

The margin was applied to the four corners using 2px for top, 4px for right and left and 6px for bottom

The margin was applied to the four corners using 2px for top, 4px for right, 6px for left and 8px for bottom

The margin-top

We can use the margin-top property to set the top spacing between the top of an element and another element or the web page. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .margins{
         border: red solid 1px;
         margin-top: 2px;
      }
      .margins1{
         border: green solid 1px;
         margin-top: 2px;
      }
   </style>
  
   <title>Illustration of margin-top property</title>
</head>
<body>
   
   <p class="margins">
      This is a paragragh showing top margin
   </p>

   <p class="margins1">
      This is a paragragh showing top margin
   </p>

   
</html>

Result

Illustration of margin-top property

This is a paragragh showing top margin

This is a paragragh showing top margin

The margin-bottom

We can use the margin-bottom property to set the bottom spacing between the bottom of an element and another element or the web page. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .margins{
         border: red solid 1px;
         margin-bottom: 2px;
      }
      .margins1{
         border: green solid 1px;
         margin-bottom: 2px;
      }
   </style>
   <title>Illustration of margin-bottom property</title>
</head>
<body>
   <p class="margins">
      This is a paragragh showing bottom margin
   </p>

   <p class="margins1">
      This is a paragragh showing bottom margin
   </p>

   
</html>

Result

Illustration of margin-bottom property

This is a paragragh showing bottom margin

This is a paragragh showing bottom margin

The margin-left

The margin-left property can be used to set the left spacing between the left of an element and another element or the web page. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .margins{
         border: red solid 1px;
         margin-left: 2px;
      }
      .margins1{
         border: green solid 1px;
         margin-left: 12px;
      }
   </style>
   <title>Illustration of margin-left property</title>
</head>
<body>
   <p class="margins">
      This is a paragragh showing margin-left
   </p>

   <p class="margins1">
      This is a paragragh showing margin-left
   </p>

   
</html>

Result

Illustration of margin-left property

This is a paragragh showing margin-left

This is a paragragh showing margin-left

The margin-right

CSS allows developers use the margin-right property to set the right spacing between the right of an element and another element or the web page. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .margins{
         border: red solid 1px;
         margin-right: 2px;
      }
      .margins1{
         border: green solid 1px;
         margin-right: 12px;
      }
   </style>
   <title>Illustration of margin-right property</title>
</head>
<body>
   <p class="margins">
      This is a paragragh showing margin-right
   </p>

   <p class="margins1">
      This is a paragragh showing margin-right
   </p>

   
</html>

Result

Illustration of margin-right property

This is a paragragh showing margin-right

This is a paragragh showing margin-right

conclusion

The CSS margin properties listed above are needed when styling your margin on a web document. A good understanding of this properties will enable you make good web page margin formatting and structure. Lets move on to the next topic on CSS LIST

Leave a Reply

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