margin-bottom (CSS property)

Description

This property defines the vertical distance from the bottom border edge of the element concerned to the edge of its containing block, or the element that’s vertically adjacent underneath. Its effect is also dependent on other factors, such as the presence of collapsing margins on vertically adjacent elements.

Note that, unlike margin-top, an element’s bottom margin will repel a floated element that’s beneath it, because floats take their vertical positions from their current positions in the normal flow.

Refer to the sections on the CSS box model, collapsing margins, containing blocks, and floating and clearing to understand exactly how margins work for all elements. The section on inline formatting also explains how margins affect inline elements.

Value

The property takes a CSS length (px, pt, em, and so on), the keyword auto, or a percentage of the width of the element’s containing block. Note that even for the top and bottom margins the percentage value will refer to the width of the containing block.

If the containing block’s width depends on the element to which percentage margins are applied, the resulting layout is undefined in CSS2.1. More verbosely this would be apparent for floated or absolutely positioned elements without an explicit width set, where a child element has margin expressed as a percentage. The parent element needs to know the dimensions of the child element to compute its own width (shrink-wrapping the contents), but the child box element also needs to know the parent's width to compute its margin (and hence its dimensions).

Negative values are allowed for margins (although implementation-specific limits may apply), and have the effect of pulling the element in the direction of the margin specified. This may cause the element to overlap other elements, which may, of course, be the desired effect. In cases where overlap occurs, we can determine the elements’ stacking levels by applying z-index values to them. In the case of non-positioned or floated elements, a z-index only takes effect when a position is set to relative for the elements, as a z-index can be applied only to positioned elements.

Negative margins on floats are handled differently and the details are covered in Floating and Clearing.

When you use the value auto, you’re allowing the browser to calculate the margins for you automatically. In most cases, the calculated value will default either to zero or to the distance required to reach the parent element’s edge. In the case of a block element that has a specified width, left and right margins to which a value of auto is applied will be set to be equal. This will effectively center the element in the available space.

If margins are over-constrained—that is, the total of their specified dimensions is greater than the available content space—the browser will reset one of the margins to auto to overcome the problem.

Vertical margins will have no effect on non-replaced inline elements.

Compatibility

Internet Explorer version 6 in some instances incorrectly bases vertical margin percentage values on the width of the body element, rather than the containing block.

Internet Explorer for Windows versions up to and including 7 differ in their handling of margin collapse from the CSS2.1 specifications. See Collapsing Margins for a detailed analysis.

Internet Explorer for Windows versions up to and including 7 don’t support the value inherit.

Internet Explorer for Windows version 8 doesn’t use the computed value of the parent’s margin when the keyword inherit is used (see James Hopkins for test case).