CSS margin PropertyS2C Home « CSS margin Property
Definition
The CSS margin property is a shorthand CSS property for specifying the other margin properties.
Applies To
All elements except elements with table display types other than inline-table, table and table-caption.
Property Values
CSS allows specification of a margin-width for each of the top, right, bottom and left margin spaces.
negative values are acceptable for when you want to overlap elements.
auto - The browser sets the margin and this can vary from browser to browser.
inherit - The margin properties are inherited from the parent element.
length - Defines a margin space in a unit measurement such as em or pixel.
n% - A percentage value relative to the parent element where n is a number.
Up to four component values are allowed as entry and the margins are calculated from these as follows :-
- one component values - applies to all sides
- two component values - first value applies to top and bottom sides, second value applies to left and right sides
- three component values - first value applies to top side, second value to left and right sides, third value applies to bottom side
- four component values - first value applies to top side, second value to right side, third value applies to bottom side and fourth value applies to left side
Default Value
Default value of margin is set to 0.
Inheritance
The margin property is NOT inherited from the parent element unless specified using the inherit property value.
Browser Anomalies
IE5, IE6 and IE7 do not support the inherit property value.
IE8 does with a valid !DOCTYPE.
IE9+ supports the inherit property value.
As mentioned above setting the property value to auto is browser dependant.
Position In The Box Model
Example
<!DOCTYPE html>
<!-- Our HTML/CSS for the CSS margin property follows -->
<html lang="en">
<head>
<title>CSS Reference - CSS margin Property</title>
<!-- Valid values for CSS margin Property are:
auto, inherit, length and percentage.
-->
<style type="text/css">
/* Draw a border above paragraphs to see margin effects */
p {
border-top: 1px solid black;
}
/* All margins set to 10px */
.img1 {
margin: 10px;
}
/* Top and bottom margins set to 25px, left and right margins set to 5px */
.img2 {
margin: 25px 5px;
}
/* Top margin set 75px, left/right margins set 25px and bottom margin set 5px */
.img3 {
margin: 75px 25px 5px;
}
/* Margins set individually top, right, bottom and centre */
.img4 {
margin: 3px 13px -25px -10px;
}
</style>
</head>
<body>
<h1>Looking at the CSS margin Property</h1>
<p><img class="img1" src="https://server2client.com/images/shepherdspiesmall.jpg"
alt="Shepherds Pie">All margins 10 pixels.
<img class="img1" src="https://server2client.com/images/shepherdspiesmall.jpg"
alt="Shepherds Pie">All margins 10 pixels.</p>
<p><img class="img2" src="https://server2client.com/images/shepherdspiesmall.jpg"
alt="Shepherds Pie">Top bottom margins 25px.
<img class="img2" src="https://server2client.com/images/shepherdspiesmall.jpg"
alt="Shepherds Pie">Left right margins 5px.</p>
<p><img class="img3" src="https://server2client.com/images/shepherdspiesmall.jpg"
alt="Shepherds Pie">Top margin 75px, left/right margins 25px.
<img class="img3" src="https://server2client.com/images/shepherdspiesmall.jpg"
alt="Shepherds Pie">Bottom margin set 5px.</p>
<p><img class="img4" src="https://server2client.com/images/shepherdspiesmall.jpg"
alt="Shepherds Pie">Top margin 3px, right margin 13px.
<img class="img4" src="https://server2client.com/images/shepherdspiesmall.jpg"
alt="Shepherds Pie">Bottom margin -25px, left margin 10px.</p>
<p>Final paragraph has a negative margin above it.</p>
</body>
</html>
How It Looks
The results of using the margin property with the values above will look something like the following:
Homepage
Top