Set the margin on the right 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-right: 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 right (or bottom) margin this will not move the element right but instead, will make following siblings move left (or up).
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 left and right margins of adjacent boxes, they are merged and the larger of the two will be used.
To centre an image or block element horizontally set display: block; and then set both the left and right margins to margin-left: auto; margin-right: auto;
The default value is 0.
Examples:
h1 { margin-right: 5px; }
.emw3class { margin-right: 1em; }
#emw3id { margin-right: -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.
#If Loving You Is Wrong, I Don't Want to Be Right# ~ Banks, Hampton & Jackson
Related:
margin-bottom - Bottom margin of an element.
margin-left - Left margin of an element.
margin-top - Top margin of an element.
margin - Shorthand to set all the margin properties in one declaration.