CSS Margin

 

CSS Margins

Margins are used to create space around elements, outside of any defined borders

With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left).

Margin - Individual Sides

CSS has properties for specifying the margin for each side of an element:

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

p{

margin-top: 100px;

margin-bottom: 100px;

margin-right: 150px;

margin-left: 80px;

}

All the margin properties can have the following values:

• auto - the browser calculates the margin
• length - specifies a margin in px, pt, cm, etc.
• % - specifies a margin in % of the width of the containing element
• inherit - specifies that the margin should be inherited from the parent element

Shorthand Property

margin: 25px 50px 75px 100px;

• top margin is 25px
• right margin is 50px
• bottom margin is 75px
• left margin is 100px

p{

    margin: 25px 50px 75px 100px;

}

If the margin property has three values:

margin: 25px 50px 75px;

p{

    margin: 25px 50px 75px;

}

top margin is 25px

right and left margins are 50px

bottom margin is 75px

margin: 25px 50px;

p{

    margin: 25px 50px;

}

top and bottom margins are 25px

right and left margins are 50px

margin: 25px;

p{

    margin: 25px;

}

All four margins are 25px