Margin

Shorthand to set the top, right, bottom and left margin properties in px, pt, %, em, etc. Margin is on the outside of box model while padding is on the inside. Use margins to separate the entire block from other elements on the page.

Syntax

element { margin: TopMargin RightMargin BottomMargin LeftMargin ;}

element { margin: TopMargin  Right&LeftMargin  BottomMargin ;}

element { margin: Top&BottomMargin  Right&LeftMargin ;}

element { margin: Margin;}

Alternatively you can choose to inherit from a parent element: Margin: inherit ;

This shorthand is equivalent to the following:

element {
  margin-top length;
  margin-right: length;
  margin-bottom: length;
  margin-left: length;
}

The default Margin for a DIV is 0, the default margin for BODY is 8px (in most browsers).
If your stylesheets contains many margin:0 definitions then it may be time to consider using a CSS reset, even a simple body {margin 0; padding: 0;}

Examples:
h1 { Margin: 5px; }
.ss64class { Margin: 2px 5px; }

#SS64id { Margin: 2px 50px 10px 75px; }

Try it:

This is a sample of text with a CSS border shown in red, containing a second DIV that we can format with CSS.

(CSS 1) Browser Support: All major browsers, IE 7 does not support inherit.

“Come to the edge, he said. They said: We are afraid. Come to the edge, he said. They came. He pushed them and they flew” ~ Guillaume Apollinaire

Related:

margin-bottom - Bottom margin of an element.
margin-left - Left margin of an element.
margin-right - Right margin of an element.
margin-top - Top margin of an element.
The CSS Box Model
margin properties - Mozilla.org


© Copyright SS64.com 1999-2014
Some rights reserved