Set the margin on the top side of an element. 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
margin-top: length | percentage | auto | inherit ;
Length - The margin size in px, pt, %, em, etc.
Percentage - size based on the width of the containing block.
auto - calculate the margins automatically. In most cases this will be zero or the distance to the edge of the parent element.
inherit - Inherit from the parent element.
Negative margins: If a static element is given a negative margin on the top/left, it pulls the element in that specified direction.
If a negative margin is applied opposite a float, it creates a void leading to the overlapping of content.
The browser does not add together the bottom and top margins of adjacent boxes, they are merged and the larger of the two will be used.
The default value is 0.
Examples:
h1 { margin-top: 5px; }
.emw3class { margin-top: 1em; }
#emw3id { margin-top: -4pt; }
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.
“The real winners are not those at the top but those who have come the farthest over the toughest roads. Your victory may never make the headlines. But you will know about it, and that's what counts” ~ Ernest A. Fitzgerald
Related:
margin-bottom - Bottom margin of an element.
margin-left - Left margin of an element.
margin-right - Right margin of an element.
margin - Shorthand to set all the margin properties in one declaration.