CSS Margin — TutorialBrain

CSS Margin Examples

This element has a margin of 30px in all the 4 sides of the box.

This element has no margin so margins at all the 4 sides are Zero.

With margin and without margin

heading 3 without margin

heading 3 with margin - You can see that there are extra spaces around the element’s border to the inner edge of the margin itself

What is Margin in CSS?

The margin is the transparent area between the outer edge of the border to the inner edge of margin itself(Refer CSS BOX model for more details).

Basically, margin is the space outside the area of the container.

Using CSS margin property, you can specify the margin at top, right, bottom and left side around the element.

The margin has 4 sides –

margin-top – margin-top is the top margin of an element.
margin-right – margin-right is the right margin of an element.
margin-bottom– margin-bottom is the bottom margin of an element.
margin-left– margin-left has left the margin of an element.

Using CSS margin, you can specify margins for all the sides using either –

A shorthand property of margin. or
Using individual sides of margin property which are margin-top, margin-right, margin-bottom, and margin-left.

Let’s see both of these in detail.

Shorthand Syntax of CSS-margin:

margin: units|initial|inherit|auto;

Where, units can take values in units like px, em, length, % etc.

This syntax sets the values of margin-top, margin-bottom,margin-right and margin-left at the same time.

Example to use the shorthand margin property

<style>
  .margin_shorthand1 {
     border:20px solid powderblue;
     margin: 5px;
}

  .margin_shorthand2 {
     border:15px solid orange;
     margin: 20px 10px;
}

  .margin_shorthand3 {
     border:8px solid pink;
     margin: 30px 10px 20px;
}

  .margin_shorthand4 {
     border:12px solid aqua;
     margin: 0 15px 20px 5px;
}
</style>

If margin has 1 value.

For Example:
margin: 10px;

then, the top, right, bottom, and left margin is 10px each.

If margin has 2 values.

For Example:
margin: 0.5em 1em;

then, the top and bottom margins are 0.5em each, while the right and left margins are 1em each.

If margin has 3 values.

For Example:
margin: 5px 3px 8px;

then, the top margin is 5px, the right and left margins are 3px each, and the bottom margin is 8px.

If margin has 4 values.

For Example:
margin: 10px 2em 15px 5px;

then, the top margin is 10px, the right margin is 2em, the bottom margin is 15px, and the left margin is 5px.

Syntax of using individual CSS-margin property:

Where, units can take values in units like px, em, length, % etc.

Follow @tutorial_brain

Example to use the individual margin property

<style>
  .margin_individual1 {
     border:10px solid orange;
     margin-top: 1em;
	 margin-bottom:2em;	 
	 margin-left: 50px;
}

  .margin_individual2 {
     border:5px dashed tomato;
	 margin-right: 60px;
}
</style>

CSS Interview Question and Answers

1. What is CSS Margin?

The margin is the space between the outer edge of the border to the inner edge of the margin itself.

Syntax:

margin:15px;

2. What are CSS margin Properties?

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

3. Syntax for CSS Margin Shorthand Property

margin:50px; (Value for all four margins).

margin:50px 80px; (top&bottom right&left) – If margin has 2 values.

margin:50px 80px 60px; (top right&left bottom) – If margin has 3 values.

margin:50px 80px 60px 45px; (top right bottom left) – If margin has 4 values.