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: Top Right Bottom Left ;} element { margin: Top Right&Left Bottom ;} element { margin: Top&Bottom Right&Left ;} element { margin: Margin;}
Alternatively you can choose to inherit from a parent element: Margin: inherit ;
margin: auto when applied to the <MAIN> element in HTML 5 will centre the content.
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 consider using a CSS reset, even a simple body {margin 0; padding: 0;}
Examples:
h1 { Margin: 5px; }
.emw3class { Margin: 2px 5px; }
#emw3id { 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