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: 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


Copyright © 2013-2022 Emw3.com
Some rights reserved