Margins on Floated Elements in CSS1

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.

IMG {  float: left;
margin-top: 0;
margin-right: 0
margin-bottom: 0
margin-left: 0 }

With margins of 0, the IMG butts to the top left margin of the parent element and the parent's content butts to IMG.
 
IMG {  float: left;
margin-top: 26px;
margin-right: 0
margin-bottom: 0
margin-left: 26px }

With top and left margins of 26 pixels, the IMG is moved 26 pixels from the top and left margins of the parent.
 
IMG {  float: left;
margin-top: -26px;
margin-right: 0
margin-bottom: 0
margin-left: -26px }

With top and left margins of -26 pixels, the IMG is moved 26 pixels into the top and left margins of the parent.
 
IMG {  float: left;
margin-top: 0;
margin-right: 26px
margin-bottom: 26px
margin-left: 0 }

With right and bottom margins of 26 pixels, the parent's content is at least 26 pixels from the IMG.
 

 
IMG {  float: left;
margin-top: 0;
margin-right: -26px
margin-bottom: -26px
margin-left: 0 }

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