Set the margin on the left 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-left: 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.
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 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; see the example below.
The default value is 0.
Examples:
h1 { margin-left: 5px; }
.emw3class { margin-left: 1em; }
#emw3id { margin-left: -4pt; }
Try it:
This is a sample of text with a CSS border (shown in orange) and an inline image that we can apply CSS formatting to. |
(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-bottom - Bottom 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.
Center a table with CSS - Scott Granneman.