CSS : MARGIN

Margin

The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent.

The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once.

Possible Values

Value	Description
auto	The browser calculates a margin
length	Specifies a margin in px, pt, cm, etc. Default value is 0px
%	Specifies a margin in percent of the width of the containing element
inherit	Specifies that the margin should be inherited from the parent element

* It is possible to use negative values, to overlap content.

Margin - Individual sides

In CSS, it is possible to specify different margins for different sides:

Example

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

Margin - Shorthand property

To shorten the code, it is possible to specify all the margin properties in one property. This is called a shorthand property.

The shorthand property for all the margin properties is "margin":

Example

margin:100px 50px;

The margin property can have from one to four values.

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

• margin:25px 50px 75px;
• top margin is 25px
• right and left margins are 50px
• bottom margin is 75px

• margin:25px 50px;
• top and bottom margins are 25px
• right and left margins are 50px

• margin:25px;
• all four margins are 25px

All CSS Margin Properties

Property	Description
margin	A shorthand property for setting the margin properties in one declaration
margin-bottom	Sets the bottom margin of an element
margin-left	Sets the left margin of an element
margin-right	Sets the right margin of an element
margin-top	Sets the top margin of an element

Other Topics

CSS : Padding,CSS : Margin,CSS : Outline,CSS : Border properties,CSS : Box model,CSS : Table color,CSS : Table text alignment,CSS : Table padding,CSS : Table width and height,CSS : Collapse borders,CSS : List,CSS : Background color,CSS : Styling links,CSS : Padding properties,CSS : Padding-shorthand property,CSS : The lang pseudo class,CSS : MEDIA,CSS::STYLING FORMS, mechanical Engineering, English books,Photoshop tutorials,Harry potter,Best 100 english books,Mechanical-old-question-paper,