CSS Margin

The CSS Margin properties define the space surrounding an element. This space is transparent, is outside the border of the element, and doesn't have a background color.

You can define the entire margin around an element or define the top, bottom, right and left margins independently. There is also a shorthand margin property so that you can define all the margins at once.

CSS Margin Values

• length An absolute value that defines a fixed margin size (in pixels, points, inches, centimeters, or millimeters)
• percentage A relative value that defines the margin size relative to other elements on the page. This is defined as a percentage (%) of the width or in ems (em) as relative to the typography.
• auto The margin is set by the browser or user-agent.

CSS margins can be positive or negative. Negative values cause the margins to overlap one another.

CSS Margins - Individual Sides

You can specify the margins for individual sides using CSS:

• margin-top
• margin-bottom
• margin-left
• margin-right

margin-top:10px;
margin-right:20px;
margin-bottom:25px;
margin-left: 15px;

CSS Margin Shorthand Property

You can use a CSS shorthand property to condense your CSS code. This is the margin property. It can have between one and four values:

Four values sets the margin top (10px), right (20px), bottom (25px), and left (15px). The values are always in that order.

margin: 10px 20px 25px 15px;

Three values sets the margin top (10px), right and left the same (20px), and bottom (15px).

margin: 10px 20px 15px;

Two values sets the margin top and bottom the same (10px) and left and right the same (20px).

margin: 10px 20px;

One value sets all margin values the same (10px).

margin: 10px;

CSS Margin Examples

• Floated Image with Default (0) Margins
• 15px Margin Around a Floated Image
• 15px Left Margin Around Floated Image
• 15px Right Margin Around Floated Image
• 15px Margin and 15px Padding Around Floated Image
• Overlapping Content with Negative Margins

More Help with CSS Margins

What is the difference between padding and margins?
CSS padding is different from margins, it's inside the border and has a background color (if one is set).

Zero Out Your Margins and Borders for Consistent Results in Browsers
This is a good trick for building consistent cross-browser designs. Set your margins to zero as the first thing in your style sheet.