CSS 2.1: Section 8

I. Collapsing margins

- block boxes in the normal flow
- floated box and any other box
- elements with 'overflow' rather than 'visible'
- absolutely positioned boxes
- inline block elements

- Block boxes in the normal flow

Vertical margins collapse. The resulting margin width is the maximum of the adjoining margin widths. In the case of negative margins, the maximum of the absolute values of the negative adjoining margins is deducted from the maximum of the positive adjoining margins.

'margin: 12px'

Both paragraphs are put inside a div with 'background: gray' and 'width: 600px;' specified.

Windows browsers

Rendering is different: Internet Explorer 6 and 5.x vs Firefox (1.5, 2.0) and Opera 9.

'margin: 12px'

'margin-top: -12px'

The second paragraph has here 'margin-top: -12px'

Windows browsers

Rendering is different: Internet Explorer 6 and 5.x vs Firefox (1.5, 2.0) and Opera 9.

- Floated box and any other box

Vertical margins do not collapse (not even between a float and its in-flow children)

'margin: 10px 0' 'float: left'

'margin: 10px 0'

Windows browsers

Rendering is different: Internet Explorer 6 and 5.x vs Firefox (1.5, 2.0) and Opera 9.

- Elements with 'overflow' other than 'visible'

Vertical margins do not collapse with their in-flow children.

'overflow: scroll'

'margin: 12px'

Windows browsers

Rendering is different: Internet Explorer (6, 5.x) and Firefox (1.5, 2.0) vs Opera 9.

- Absolutely positioned boxes

Margins do not collapse (not even with their in-flow children).

'margin: 10px 0' 'position: absolute' 'top: 0' 'left: 0'

'margin: 10px 0' 'position: absolute' 'top: 50px' 'left: 0'

Windows browsers

Rendering is different: Internet Explorer (6, 5.x) and Opera 9 vs Firefox (1.5, 2.0).

- Inline-block elements

Margins do not collapse (not even with their in-flow children).

Lorem ipsum dolor sit amet e ideo autem aquis concupiscientia huius mundi comparatur 'margin: 12px' 'display: inline-block'
'margin: 12px' 'display: inline-block'

Windows browsers

Rendering is different: Internet Explorer 6 and Opera 9 vs Firefox (1.5, 2.0).

II. Negative margins

'margin-left: 10px' 'width: auto' 'margin-right: -50px'

10px + 0 ('border-left) + 0 ('padding-left')+ 640px ('width: auto') + 0 ('padding-right') + 0 ('border-right') -50px ('margin-right') = 600px (width of the container)

Windows browsers

Rendering is different: Internet Explorer (6, 5.x) vs Firefox (1.5, 2.0) and Opera 9.