The examples below test floating images in conjunction with margin properties. Sample renderings are provided to indicate how the examples should be shown, but due to font differences on different platforms, the example text may not break in the same places.
Horizontal rules are provided as reference points. They are declared as top and bottom borders on DIV elements that encompass each example and rendering. Since DIV has no margins or padding, the outer edges of the renderings and examples should abut the rules. Since there is a 36-pixel top margin on the examples, there should be 36 pixels between the preceding rule and the white background.
The examples have a 36-pixel top margin and a 33-pixel left margin, therefore the top edge of the white background should be 36 pixels below the preceding rule and the left edge of the white background should be 33 pixels from the left edge of the window. Also, the sample renderings have zero margins and padding, but there are transparent areas at the top and left that correspond to the margins on the examples.
With margin of 0, the IMG butts to the top left margin of the parent element and the parent's content butts to IMG.
Wallowing in the mud not
part of the continent yet part of the hole, to oink again is all we
crave, and much resent that winds cry "sooie." Not to pork about the
state of slop is not our nature, for it's surely sloppy politics that
put the hide on the hog. In our sublime greed we'll never be
fraternized by those less boarish, lest we fall to our station and
lesser snouts prevail.
Here is a rendering of what the example should look like:
With top and left margins of 26 pixels, the IMG is moved 26 pixels from the top and left margins of the parent.
Wallowing in the mud not
part of the continent yet part of the hole, to oink again is all we
crave, and much resent that winds cry "sooie." Not to pork about the
state of slop is not our nature, for it's surely sloppy politics that
put the hide on the hog. In our sublime greed we'll never be
fraternized by those less boarish, lest we fall to our station and
lesser snouts prevail.
Here is a rendering of what the example should look like:
With top and left margins of -26 pixels, the IMG is moved 26 pixels into the top and left margins of the parent
Wallowing in the mud not
part of the continent yet part of the hole, to oink again is all we
crave, and much resent that winds cry "sooie." Not to pork about the
state of slop is not our nature, for it's surely sloppy politics that
put the hide on the hog. In our sublime greed we'll never be
fraternized by those less boarish, lest we fall to our station and
lesser snouts prevail.
Here is a rendering of what the example should look like:
With right and bottom margins of 26 pixels, the parent's content is at least 26 pixels from the IMG.
Wallowing in the mud not
part of the continent yet part of the hole, to oink again is all we
crave, and much resent that winds cry "sooie." Not to pork about the
state of slop is not our nature, for it's surely sloppy politics that
put the hide on the hog. In our sublime greed we'll never be
fraternized by those less boarish, lest we fall to our station and
lesser snouts prevail.
Here is a rendering of what the example should look like:
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.
Wallowing in the mud not
part of the continent yet part of the hole, to oink again is all we
crave, and much resent that winds cry "sooie." Not to pork about the
state of slop is not our nature, for it's surely sloppy politics that
put the hide on the hog. In our sublime greed we'll never be
fraternized by those less boarish, lest we fall to our station and
lesser snouts prevail.
Here is a rendering of what the example should look like:
