CSS Margin

 

CSS Margin

The margin is the space outside the HTML element. It gives external spacing and differentiates two or more elements.


Consider the image:


Css Margin



Here, the space outside the border is the margin.

Syntax:

selector{
    margin: value;
}


The margin value can be used in any of the following methods:

Method 1

selector{
        margin: value;
}


Here, the margin value will apply an equal margin to all sides (top, right, left, and bottom).

Example:

<html lang="en">
<head>
    <style>
        #p1{
            border: 2px solid purple;
        }
        #p2 {
            margin: 12px;

            border: 2px solid red;
        }
    </style>
</head>
<body>
    <p id="p1">Maxoncodes (without margin)</p>
    <p id="p2">Maxoncodes (with margin)</p>
</body>
</html>


Note: Values can be specified in different units, such as pixels (px), em, rem, percentage (%), auto, etc.


Css Margin



Method 2

selector{
        margin: value1 value2;
}


Here, value 1 is the vertical margin (y-axis), and value 2 is the horizontal margin (x-axis).

Example:

<html lang="en">
<head>
    <style>
        #p1{
            border: 2px solid purple;
        }
        #p2 {
            margin: 20px 50px;
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <p id="p1">Maxoncodes (without margin)</p>
    <p id="p2">Maxoncodes (with margin)</p>
</body>

</html>

Css Margin



Note: You can use the inspect tool to verify.

Method 3

selector{
        margin: value1 value2 value2 value4;
}

In this method, each value represents the margin of individual sides (top, right, bottom, left).

  • top: value1
  • right: value2
  • bottom: value3
  • left: value4

Example:

<html lang="en">
<head>
    <style>
        #p1{
            border: 2px solid purple;
        }
        #p2 {
            margin: 15px 30px 25px 50px;
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <p id="p1">Maxoncodes (without margin)</p>
    <p id="p2">Maxoncodes (with margin)</p>
</body>
</html>




In this example, the margin on individual sides is


  • top: 10px
  • right: 20px
  • bottom: 25px
  • left: 50