The Margin Properties

The margin is a blank area between elements in which only the background color or image of the parent element (or the nearest ancestor element that has a background color or image) is visible.

The margin property can take up to four length or percentage values, the keyword auto repeated up to four times or the keyword inherit once. Multiple values are separated by spaces.

Example 1: margin:4px 8em auto 10px;

Example 2: margin:inherit;

When a margin declaration has one value, all the four margins — top, right, bottom and left, are set to that value.

When a margin declaration has four values, the first value refers to the top margin, the second refers to the right margin, the third refers to the bottom margin and the fourth refers to the left margin.

When a margin declaration has two values, the first value refers to the top and bottom margins and the second value refers to the right and left margins.

When a margin declaration has three values, the first value refers to the top margin, the second value refers to the right and left margins, and the third value refers to the bottom margin.

Percentage values refer to the width of the containing block element. margin is not an inherited property. It does not have an initial value. The default margins of an element depends on browsers' internal stylesheets.

Margin sizes can also be specified individually using the margin-top, margin-right, margin-bottom and margin-left properties.

Note: Margins of the html element have the same background color or image as the html element. Firefox 3.5, Internet Explorer 7 and Internet Explorer 8 do not render the bottom margin of the the html element. Internet Explorer 6 does not render the borders and margins of the html element correctly. Internet Explorer 7 renders all margins of the html element as solid margins.

margin with px values

In block-level element that does not have padding or borders, having a block-level child element, the height of the parent element will be just enough to contain the borders, padding and content area of the child element. Therefore, the top and bottom margins of the child element will spill out of the parent's content area. This happens because the margin of the child element is in contact with the margin of the parent element. Therefore, the two margins collapse.
However, if the child element's top or bottom margin has the parent element's padding or border adjacent to it, then the margin will be within the content area of the containing block. This is because the two margins are separated by the padding or border.

Example 3: <div style="margin:0;padding:0"><p style="font-size:35px;font-family:'Times New Roman';margin:20px;padding:0">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p></div>

In the above example, the top and bottom margins of the <p> are outside the content area div. If the div had top and bottom margins, then the top and bottom margins of the <p> would collapse with the top and bottom margins of the div.

Example 4: <div style="margin:0;padding:0;border-style:solid;border-width:1px"><p style="font-size:35px;font-family:'Times New Roman';margin:20px;padding:0">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p></div>

Since the div has a border, the top and bottom margins are within the content area of the div.

Example 5: <div style="margin:0;padding:1px"><p style="font-size:35px;font-family:'Times New Roman';margin:20px;padding:0">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p></div>

Since the div has a padding, the top and bottom margins are within the content area of the div.

Over-constrained Margins

Margins are said to be over-constrained when there is not enough space for them in the containing block.

Example 6: <div style="height:200px;border-width:10px;border-style:solid"><p style="font-size:35px;font-family:'Times New Roman';height: 200px;margin:20px">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p></div>

In the above example, there is insufficient space for the top and bottom margins. In this situation, the browser renders the top margin within the containing div, and, the content area of the <p> overflows out of the bottom of the div. The bottom margin of  the <p> has no effect on subsequent content. Subsequent elements are rendered on top of the overflowed parts of the <p>.

Example 7: <div style="width:200px;border-width:10px;border-style:solid"><p style="font-size:35px;font-family:'Times New Roman';width:200px;margin:20px">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p></div>

In the above example, there is insufficient space for the left and right margins. In this situation, the browser renders the left margin within the containing div, the content area of the <p> and the right margin overflow out of the right of the div.

Left and Right Margins and Viewport Width

Example 8: <body><p style="font-size:35px;font-family:'Times New Roman';width:700px;margin:50px">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p></body>

In the above example, the width of the left and right margins are 50px each and the width of the content area of the <p> is 700px. Therefore the minimum width of the viewport required to display the <p> and its margins is 800px. No matter what the width of the viewport, the left margin is always rendered. The right margin, however, behaves as if it has been set to auto. Therefore, if the viewport's width is less than 750px, the browser will put a horizontal scroll bar so that both the left margin and the <p>'s content area can be viewed and the content area of the <p> will overflow the content area of its parent; there will be no right margin. If the viewport's width is greater than 750px but less than 800px, then the left margin and content area will have the specified width, and the remaining space will be taken up by the right margin. If the viewport's width is greater than 800px, the right margin's width will be greater than 50px.

Due to various bugs, the above example renders differently in Internet Explorer 6 — like other browsers, the left margin is always 50px, but unlike other browsers, the right margin is always present and has a minimum width of 50px. If the viewport's width is less than 800px, the browser puts a horizontal scroll bar. Also, the width of the body element is automatically increased by the browser so that the margins and content area of the <p> never overflow.

Due to a rendering bug, Internet Explorer 7, like Internet Explorer 6, always renders the left and right margins along with the <p>'s content area. The difference is, it does not automatically increase the width of the containing element. Therefore, when the width of the viewport is less than 800px, the right margin and, if necessary, the content area of the <p> overflow the body element. The right margins is always 50px or more.

Firefox 3, Firefox 3.5 and Internet Explorer 8 render the above example correctly.

Unconstrained Margins

When the sum of the widths of the left and right margins and the width of the content area is less than the width of the content area of the containing block, the right margin expands to take up the extra space available.

When the sum of the heights of the top and bottom margins and the height of the content area is less than the height of the content area of the containing block, the bottom margin expands to take up the extra space available.

Example 9: <div style="width:600px;height:400px;border-width:1px;border-style:solid"><p style="font-size:35px;font-family:'Times New Roman';height:200px;margin:20px">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p></div>

In the above example, the left and top margins are 20px while the right and bottom margins are 180px.

Vertical Collapsing of Margins

When the top or bottom margins of two elements come into contact with each other, the two margins vertically collapse. Therefore, the resulting margin will be the size of the larger margin. If the two margins are equal, then the margins will collapse to the size of a single margin.

Example 10: <p style="font-size:35px;font-family:'Times New Roman';margin:15px">the quick brown fox jumps over the lazy dog.</p>
<p style="font-size:35px;font-family:'Times New Roman';margin:25px">the quick brown fox jumps over the lazy dog.</p>

Left and right margins never collapse — a left and a right margin that are adjacent to each other remain the same size, therefore the total horizontal distance between the elements will be the sum of the margins.

Example 11: <p style="font-size:35px;font-family:'Times New Roman'">the quick brown fox j<span style="margin:20px">u</span><span style="margin:20px">m</span>ps over the lazy dog</p>

In the above example, the distance between the "u" and the "m" will be 40px.

Example 12: <div style="margin:10px;padding:0;background-color:purple"><p style="font-size:35px;font-family:'Times New Roman';margin:20px;padding:0">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p></div>

In the above example, the top and bottom margins of the <p> (20px) collapse with the top and bottom margins of the <div>, resulting in a margin of 20px. This is because the top and bottom margins of the <p> are outside the <div> since the <div> has no top and bottom border or padding.

When an element that has no padding or border has a child element that has top or bottom margins, the margins of the child element collapses with the margins of the parent element. However, if there is a border or padding separating two margins, then they do not collapse.

Negative Margins

When a margin declaration has a negative value, and after collapsing the margin with adjacent margins the result is still negative, the content area of the element that the negative margin is applied to will be moved up or the content area of the next element will be moved up, or, the content area of the element will be stretched left or right depending on which margin has the negative value.

Internet Explorer 6 and Internet Explorer 7 do not correctly render negative margins that cause elements to overlap each other or overflow their containing elements. Some of Internet Explorer 7's negative margin bugs can be fixed by triggering hasLayout on the element that has the negative margins.

Negative top and bottom margins

When an element has a negative margin and the adjacent element has a margin that collapses on the negative margin, the resulting margin is the algebraic sum of the two margins.

When an element has a negative top or bottom margin that, after collapsing with adjacent margins (if any) is still negative, the element is moved up (in the case of the top margin) or, the next element's content area is moved up (in the case of the bottom margin).

In Internet Explorer 6, the part of the top or bottom of an element's content area that overflows the boundary of its containing block (which could be the edge of the containing block's content area, the outer edge of the padding or the outer edge of the border), is cut-off or truncated. This bug cannot be fixed by triggering hasLayout.

In Internet Explorer 7, when inside a div, a part of the top or bottom of an element's content area that is next to that element's negative margin is cut-off or truncated. This bug occurs even when the padding of the element's content area does not overflow its containing element. This bug can be fixed by triggering hasLayout on the element that has the negative margin.

Example 13: <p style="font-size:35px;font-family:'Times New Roman';margin-bottom:-10px">the quick brown fox jumps over the lazy dog, the five boxing wizards jump quickly</p> <p style="font-size:35px;font-family:'Times New Roman';margin-left:10px;margin-top:0;">the quick brown fox jumps over the lazy dog, the five boxing wizards jump quickly</p>

In the above example, the first <p> has a negative bottom margin and the <p> after it has a top margin set to 0. Therefore, the content area of the second <p> is moved 10 pixels up. This brings the content area of the second <p> on top of the content area of the first <p>. The background image of the second <p> covers 10 pixels of the background of the first <p>. However, the text of the first <p> is not covered.

Note: Internet Explorer 6, due to a bug, does not render the background image of the second <p> correctly. In Internet Explorer 7, the background image of the second <p> covers the text of the first <p>. This bug cannot be fixed by triggering hasLayout.

Negative left and right margins

When an element has a negative margin and the adjacent element has a margin that collapses on the negative margin, the resulting margin is the algebraic sum of the two margins.

When an element has a negative left or right margin that, after collapsing with adjacent margins (if any) is still negative, the element is extended to the left (in the case of the left margin) or, is extended to the right (in the case of the right margin). The extended portion to the left is outside the viewport cannot be viewed and the extended portion to the right can be viewed by horizontal scrolling.

In Internet Explorer 6, the part of the left or right of an element's content area that overflows the boundary of its containing block (which could be the edge of the containing block's content area, the outer edge of the padding or the outer edge of the border), is cut-off or truncated. This bug cannot be fixed by triggering hasLayout.

In Internet Explorer 7, when inside a div, an element that has a negative right margin will have the portion of the content area that overflows the boundary of the containing element on the right truncated. The boundary of the containing element may be the right edge of the content area, the outer edge of the right padding or the outer edge of the right border. This bug can be fixed by triggering hasLayout on the element that has the negative margin. However, this fix does not work if the containing element does not have padding or borders on the side of the negative margin of the child element.

Example 13: <p style="font-size:35px;font-family:'Times New Roman';margin-right:-50px;margin-left;-50px;padding:0">the quick brown fox jumps over the lazy dog, the five boxing wizards jump quickly</p>

In the above example, since the left margin is -50px, 50px from the beginning of the <p> is cut off because it is supposed to be rendered outside the viewport. Note that the cut off portion cannot be viewed — it is not possible to horizontally scroll to that region. The right margin is -50px, therefore, 50px of the <p> overflows the content area of is the containing element (<body>). If the margin of the containing element is not large enought to contain the overflow, the <p> overflows it. The browser puts a horizontal scroll bar which enables one to scroll to the part of the <p> that is outside the visible part of the viewport.

Note: Internet Explorer 6 always expands the width of the containing element to accomodate the width of a child element. This is a bug. Internet Explorer 7, at certain window widths, renders the above example in the same way as Internet Explorer 6 (incorrectly) but at other widths renders it correctly.

margin Declarations with auto

The keyword auto is useful only when applied to left and right margins. On top and bottom margins, auto results in zero margins. However in Internet Explorer 6 and 7, due to a bug, auto on top and bottom margins do not result in zero margins. Therefore, auto on top and bottom margins must be avoided.

When there is no left and right padding or borders on an element, the sum of the widths of the content area, the left margin, and the right margin will be equal to the width of the content area of the containing block.When left or right margins have the value auto, the browser determines the size of the margin, which will be such that the sum of the left and right margins and the content area is equal to the width of the content area of the containing block.

On an element that has no left and right padding or borders, when the sum of the widths of the content area and the left and right margins does not equal to the sum of the content area of the containing block, the right margin is expanded to fill the available space. However, if the left margin is set to auto, then the left margin expands to fill the available space.

margin-right:auto

On an element whose width is auto, margin-right:auto causes the element's right margin to become zero.

On an element that has its width set to a particular size and left margin set to zero or a particular size, margin-right:auto causes the element's right margin to expand to fill all the available space (after allocation of space to the content area and left margin). This is the default appearance of the right margin whether (when width and left-margin are of a particular size) or not there is a CSS declaration that matches the right margin.

Example 14: <div style="height:400px;width:400px"><p style="font-size:35px;font-family:'Times New Roman';margin-right:auto;width:200px">the quick brown fox jumps over the lazy dog, the five boxing wizards jump quickly</p></div>

margin-left:auto

On an element whose width is auto, margin-left:auto causes the element's left margin to become zero.

On an element that has its width to set a particular size and right margin set to zero or a particular size, margin-left:auto causes the element's right margin to expand to fill all the available space (after allocation of space to the content area and left margin).

Example 15: <p style="font-size:35px;font-family:'Times New Roman';margin-left:auto;width:200px">the quick brown fox jumps over the lazy dog, the five boxing wizards jump quickly</p>

margin-left:auto and margin-right:auto

On an element whose width is auto, if both the left and right margins have the value auto,  the element's left and right margins become zero.

On an element that has its width set to a particular size, having both left and right margins set to auto causes the available space (after allocation of the content area space) to be split equally among the left and right margins. Therefore, the element's content area will be horizontally centered in the containing block's content area.

Example 16: <p style="font-size:35px;font-family:'Times New Roman';margin-left:auto;margin-right:auto;width:200px">the quick brown fox jumps over the lazy dog, the five boxing wizards jump quickly</p>

margin-top:auto and margin-bottom:auto

margin-top:auto and margin-bottom:auto causes the top and bottom margins of element to become zero. However, in Internet Explorer 6 and Internet Explorer 7 the margins are greater than zero. This is a bug.

Note that if, after allocating the necessary vertical space to all the components of an element box there is still space left in the containing block, then the bottom margin expands and uses the remaining space, even if the element has the margin-bottom:auto declaration.

Margin Declarations in Percentages

Percentages in margin declarations refer to the width of the containing block element. Internet Explorer 6 frequently calculates percentage margins incorrectly. Note that even top and bottom margins are calculated with respect to the width (not the height) of the containing block element.

Margin Declarations in em

Margin declarations in em refer to the font size of the element to which the declaration applies.