What is margin?

The margin is the space outside the border.

Margin Individual Sides

div {
    border: 5px solid red;
    margin-top: 50px;
    margin-bottom: 50px;
    margin-right: 50px;
    margin-left: 50px;
    background-color: lightgrey;
    font-size: 20px;
}

Try it

Margin Inherit

p.value {
    margin-left: 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.

div {
    border: 5px dashed red;
   margin: 100px;
    background-color: hotpink;
    color: white;
    font-size: 30px;
}

Try it

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

margin: 120px 250px;

div {
    border: 10px double red;
   margin: 120px 250px;
    background-color: lightgray;
    color: brown;
}

Try it

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

margin: 50px 100px 160px;

div {
    border: 10px groove blue;
   margin: 50px 100px 160px;
    background-color: lightgray;
    color: purple;
}

Try it

Margin Shorthand Property as auto

div {
    width: 300px;
    margin: auto;
    border: 10px groove purple;
}

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.

h1 {
    margin: 20px 0px 80px 0px;
}

h1 {
    margin: 100px 0px 0px 0px;
}

Try it

Video Lecture