Search within TutorialsPark

CSS Margins


Use CSS margins to control the spaces in-between the element's border and surrounding elements.


CSS Margin

1. The CSS margin property enables you to control the spacing between the border of the element(content) and the surrounding elements.

2. The margin cannot have background color and opacity, its just a vacant space to make the contents appear neat .

Demo: CSS Margins (with Angry Birds )

angry_birds

margin:

Note: If margin is specified in percent(px), the value is based on the values of the parent element

Properties of CSS Margin

Property Description Values
margin-top Defines the Margin for content's top edge
auto
length(px, em, cm)
percentage(%)
margin-right Defines the Margin for content's right edge
auto
length(px, em, cm)
percentage(%)
margin-bottom Defines the Margin for content's bottom edge auto
length(px, em, cm)
percentage(%)
margin-left Defines the Margin for content's left edge auto
length(px, em, cm)
percentage(%)
margin A shorthand to set margin for all the edges at once auto
length(px, em, cm)
percentage(%)

Note: For margin value as auto,, the content fits itself within the space available.

CSS Margins: For Individual Egdes of Content

1.You can set different margin values for content's individual edges independent of each other.

2. The CSS property to set margin for top, bottom, left, right are margin-top, margin-bottom, margin-left, margin-right repectively.

The margins can be specified in 4 different ways:

margin : 5px 10px 15px 20px (top, right, bottom, left ) i.e clockwise starting from top.

margin : 5px 10px 15px (top, right, bottom ) i.e clockwise starting from top.

margin : 5px 10px (top and bottom (5px), right and left(10px) ) i.e clockwise starting from top.

margin : 5px (all sides of content )

Example: CSS - Individual Margins

Give it a TRY! » Note: Individual edges have different margin values.


CSS Margins: margin shorthand

1. By using the shorthand margin , you can set the margin of all the edges of the content at once in a single declaration.

2. The value set as the margin of the content can be the same for all the edges or different for all the edges.

Example: CSS Margins Shorthand

Give it a TRY! »


Centering Content using Margins

1. Any block level element can be centered within the containing element by setting its left and right margins as "auto"

Example:CSS Center content using margin

Give it a TRY! » Note: In practical usage the hanging indent(outside) is prefered over non-hanging indent(inside) .


CSS Margin: Indent Text

1. You can make you text indent using the CSS margin property to create exact amount of vacant space on each side of the text.

Example: CSS Margins Text Indent

Give it a TRY! » Note: Similar effects can be achieved blockquote element .


CSS Negative Margins

angry_birds

margin:

1. Using CSS we can have elements with negative margins, it causes the gap in-between the elements to further reduce than in normal case with no margins.

2. At times elements with negative margins could overlap each other or can be hidden from the display

Example: CSS Margins : Negative Margins

Give it a TRY! » Note: Google warns developers not to hide element using CSS negative margins.