1c. Paragraph (wrapper with vertical padding)
These tests show other IE margins issues, but as can be seen, when a floated element is inside a list item, margins disappear and mysterious spaces appear.
With the next three examples, IE shows correct behavior. The paragraphs' top margin is contained by the containers' content edge since the container has padding.
1a. Paragraph (wrapper with vertical padding)
1b. Paragraph (wrapper with vertical padding)
1c. Paragraph (wrapper with vertical padding)
For the following examples, each <ul> element has margin and padding of 0 and each <li> element has margin of 0.
With the next three examples, IE shows wrong behavior. With examples 2a and 2b, the paragraphs' top margin has disappeared. With example 2c, the paragraphs' top margin is present, but the mysterious space above the paragraphs' top margin edge has appeared.
2a. Paragraph (wrapper with vertical padding)
2b. Paragraph (wrapper with vertical padding)
2c. Paragraph (wrapper with vertical padding)
With examples 3a and 3b, IE shows correct behavior. With example 3c, IE shows wrong behavior since an extra space above the static divs top edge has appeared.
It would appear that there is a difference between the examples with a floated divs as compared to the examples with a floated images as the extra space only appears with the examples with floated images, but it changes when the container does not have padding.
With example 5a, IE shows correct behavior, the paragraphs' top margin stick out beyond the container, thus pushing the container down from the grey div by 20 pixels. With example 5b and 5c, IE shows wrong behavior, the paragraphs' top margin pushes the paragraph down by 20 pixels form the floats top edge, instead of the top margin sticking out beyond the container. This goes against the W3C specifications for floats.
CSS2.1 9.5 Floats: Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn't exist.
4a. Paragraph
4b. Paragraph
4c. Paragraph
With example 6a, IE shows wrong behavior, the paragraphs' top margin has disappeared. With example 6b and 6c, IE shows wrong behavior, the paragraphs' top margin pushes the paragraph down by 20 pixels form the floats top edge, instead of the top margin sticking out beyond the container. This goes against the W3C specifications for floats. The mysterious space above the paragraphs' top margin edge has appeared for both the floated div and the floated image.
5a. Paragraph
5b. Paragraph
5c. Paragraph
With no elements with vertical margin or padding, the mysterious space is still present. The only fix is the usual IE fix, which is to give the container hasLayout. Are you still wondering why the space is there in the first place, just go on wondering because I haven't figured it out yet.
Example 4b, 4c, 5b and 5c show the IE Margin Transference Bug.