CSS margin

The margin property defines the thickness of the area outside the border of box (element). Or it defines the space between the boundaries of two boxes (elements).

margin-top

This property represens the margin above the box.

<style>
div{margin-top:100px;}
</style>
Try </>

margin-right

defines the thickness of the area on the right side of the box.

<style>
div{margin-right:100px;}
</style>
Try </>

margin-bottom

defines the margin at the bottom of the box.

<style>
div{margin-bottom:100px;}
</style>
Try </>

margin-left

specifies marginal area on the left side of the box.

<style>
div{margin-left:150px;}
</style>
Try </>

margin - A short hand property

All of the above four properties can be written using only margin property.

<style>
div{
margin:margin-top margin-right margin-bottom margin-left;
margin:80px 40px 20px 10px;
}
</style>
Try </>

The margin property specifies four values for four different sides. Four values are separated by spaces. The fist value for top, second for right, third for bottom and fourth for value is for left side.

margin:20px; is the same as

margin:20px 20px 20px 20px;

margin:15px 20px; is the same as

margin:15px 20px 15px 20px;

margin:20px 15px 10px; is the same as

margin:20px 15px 10px 15px;

margin collapse

When the margins of two boxes collapse, then the margin with the maximum value is used by the browser.

For example, if the margin-bottom of one box and the margin-top of another box collapse, then maximum margin value will be used.

<p style="margin-bottom:25px;">This is a paragraph that has 25px bottom margin.</p>
<div style="margin-top:17px;">
 <p style="margin-top:10px;">It has 10px top margin.</p>
</div>

Try </>

In the above example, the margin bottom of p (25px) collapses with the margin-top of the div (17px) and margin-top of the p (10px). But the resulting margin is of p (25px). And 25px margin is the maximum of the three.