Set the margin on the bottom 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-bottom: 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 bottom (or right) margin this will not move the element down but instead, will make following siblings move up (or left).
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-bottom: 5px; }
.emw3class { margin-bottom: 1em; }
#emw3id { margin-bottom: -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.
“Everything is worth what its purchaser will pay for it” ~ Publilius Syrus
Related:
margin-left - Left margin of an element.
margin-right - Right margin of an element.
margin-top - Top margin of an element.
margin - Shorthand to set all the margin properties in one declaration.