html5 Site Icon CSS3 Site Icon CSS Site Icon

CSS 1/2 Reference

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

notepad

Example



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- Our HTML/CSS for the CSS margin property follows -->
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS 1/2 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="http://htmldoctor.info/images/shepherdspiesmall.jpg"
    alt="Shepherds Pie" />All margins 10 pixels.
    <img class="img1" src="http://htmldoctor.info/images/shepherdspiesmall.jpg"
    alt="Shepherds Pie" />All margins 10 pixels.</p>
<p><img class="img2" src="http://htmldoctor.info/images/shepherdspiesmall.jpg"
    alt="Shepherds Pie" />Top bottom margins 25px.
    <img class="img2" src="http://htmldoctor.info/images/shepherdspiesmall.jpg"
    alt="Shepherds Pie" />Left right margins 5px.</p>
<p><img class="img3" src="http://htmldoctor.info/images/shepherdspiesmall.jpg"
    alt="Shepherds Pie" />Top margin 75px, left/right margins 25px.
    <img class="img3" src="http://htmldoctor.info/images/shepherdspiesmall.jpg"
    alt="Shepherds Pie" />Bottom margin set 5px.</p>
<p><img class="img4" src="http://htmldoctor.info/images/shepherdspiesmall.jpg"
    alt="Shepherds Pie" />Top margin 3px, right margin 13px.
    <img class="img4" src="http://htmldoctor.info/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:

notepad
CSS list-style-type    << Prev          Next >>   CSS margin-bottom

go to home page Homepage go to top of page Top

CSS properties

The complete set of visual CSS properties from the latest 2.1 Specification.

Click the links for more information on individual properties and their values.