Css Margin property

admin_img Posted By Bajarangi soft , Posted On 10-10-2020

CSS margins are used to create space around the element. We can set the different size of margins for individual sides(top, right, bottom, left).

Css Margins property

Margin properties can have following values:
1. Length in cm, px, pt, etc.
2. Width % of the element.
3. Margin calculated by the browser: auto.

Syntax:

body
{
    margin: size;
}

1. If the margin property has 4 values:
margin: 40px 100px 120px 80px;
1. top = 40px
2. right = 100px
3. bottom = 120px
4. left = 80px


Example:

<html>
<head>
    <style>
        p
        {
            margin:80px 100px 50px 80px;
        }
    </style>
</head>
<body>
<h1>
   Bajarangi Soft
</h1>
<p>
    Margin properties
</p>
</body>
</html>
2. If the margin property has 3 values:
margin:40px 100px 120px;
top = 40px

 
<html>
<head>
    <style>
        p
        {
            margin:80px 50px 100px;
        }
    </style>
</head>
<body>
<h1>
    Bajarangi Soft
</h1>
<p>
    Margin properties
</p>
</body>
</html>
3. If the margin property has 2 values:
 margin: 40px 100px;
top and bottom = 40px;
left and right = 100px;
<html>
<head>
    <style>
        p
        {
            margin:100px 150px;
        }
    </style>
</head>
<body>
<h1>
   Bajarangi Soft
</h1>
<p>
    Margin properties
</p>
</body>
</html>
4. If the margin property has 1 value:
 margin: 40px;
top, right, bottom and left = 40px
<html>
<head>
    <style>
        p
        {
            margin:100px;
        }
    </style>
</head>
<body>
<h1>
   Bajarangi Soft
</h1>
<p>
    Margin properties
</p>
</body>
</html>

Related Post