Here are hypothetical examples of how margins should be treated on an element that has been floated left. The example floated element is an image within a paragraph, with HTML markup of:
<P><IMG SRC="pig.gif">Wallowing ... |
The style declaration for the paragraph is:
P { | font-family: "Times New Roman"; margin-top: 36px; margin-left: 33px; font-size: 28px; line-height: 28px } |
The paragraph margin is indicated by the gray band. To the right of each image is the corresponding style declaration and a description of the effect.
With margins of 0, the IMG butts to the top left margin of the parent element and the parent's content butts to IMG. |
|||
With top and left margins of 26 pixels, the IMG is moved 26 pixels from the top and left margins of the parent. | |||
With top and left margins of -26 pixels, the IMG is moved 26 pixels into the top and left margins of the parent. | |||
With right and bottom margins of 26 pixels, the parent's content is at least 26 pixels from the IMG. | |||
With right and bottom margins of -26 pixels, the parent's content may overlap the image 26 pixels from the bottom and right of the IMG. |
Page by Hearn/Perrell Art Associates.
Please email comments to David Perrell