CSS Margin

Please Share On:

Definition:

CSS Margin property is used to put spaces outside defined borders. “Margin” property is the shorthand property of all four individual margin properties. i.e,

margin-top
margin-right
margin-bottom
margin-left

Click Here to see the margin in box-model

Syntax:

margin: 10px;

Margin Property Values

Margin property values can have 1, 2 , 3 and 4 values.

One Margin Property Value

If you have one margin property value, then the margin applies to all four sides.

Syntax:

.paragraph
{
margin: 10px;
}

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    .paragraph{
      border: 2px dashed red;
      background-color: pink;
      text-align:center;
      margin: 10px;
    }
  	</style>
  </head>

  <body>
  	<div class="paragraph">This element has 10px equal margin in four sides.</div>
  </body>
</html>

Output:

Try it YOURSELF

2. Two Margin Property Value

If you have two margin property values, the first value applies top and bottom margins, and the second value applies left and right margins.

Syntax:

.paragraph
{
margin: 10px 20px;
}

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    .paragraph{
      border: 2px dashed red;
      background-color: pink;
      text-align:center;
      margin: 10px 20px;
    }
    </style>
  </head>

  <body>
 	 <div class="paragraph">Top and Bottom margins are 10px <br/> Left and Right margins are 20px.</div>
  </body>
</html>

Output:

try it yourself

3. Three Margin Property Value

If you have three margin property values, the first value applies top, the second value applies left and right margins and the third value applies to the bottom.

Syntax:

.paragraph
{
margin: 10px 20px 5px;
}

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    .paragraph{
      border: 2px dashed red;
      background-color: pink;
      text-align:center;
      margin: 10px 20px 5px;
    }
    </style>
  </head>

  <body>
  	<div class="paragraph">Top Margin is 10px; <br/> Left and Right margins are 20px;<br/> Bottom margin is 5px;</div>
  </body>
</html>

Output:

try it yourself

4. Four Margin Property Value

If you have four margin property values, then the first value applies to the top, the second value applies to the right, the third value applies to the bottom and the fourth value applies to the left.

Syntax:

.paragraph
{
margin: 10px 20px 15px 10px;
}

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    .paragraph{
      border: 2px dashed red;
      background-color: pink;
      text-align:center;
      margin: 10px 20px 15px 10px;
    }
    </style>
  </head>

  <body>
  	<div class="paragraph">Top Margin is 10px; <br/> Right margin is 20px;<br/> Bottom margin is 15px; <br/> Left margin is 10px;</div>
  </body>
</html>

Output:

try it yourself

Donate to support writers

You may be interested in the following topics:

Post Views: 415

Definition:

Margin Property Values

Leave a Reply Cancel reply

Copyright @2023. All Right Reserved.