Margin in CSS

By: Prof. Fazal Rehman Shamil
Last modified on May 4th, 2020

What is margin?

The margin is the space outside the border.

what is the difference between padding margin and border

Margin Individual Sides

Try it

Margin Inherit

Try it

Margin Shorthand Property

We can specify different margin for each side of an element. For example, we can specify it as;

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

We can specify it in one value.

Try it

We can specify it in two values. For example, we can specify it as;

margin: 120px 250px;

Try it

We can specify it in three values. For example, we can specify it as;

margin: 50px 100px 160px;

Try it

Margin Shorthand Property as auto

Try it

Margin Collapse

Let’s see the example in which the h1 element has a bottom margin of 40px and the h2 element has a top margin of 15px. Then, the vertical margin between h1 and h2 should have been 55px (40px + 15px). However, we are collapsing the borders, so the actual margin ends up being 40px.

Try it

Video Lecture

Prof. Fazal Rehman Shamil