css1/box_properties/float_margin.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"><html><head><title>CSS1 Test Suite: 5.5.25 float</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">

<link rel="stylesheet" type="text/css" media="screen" href="../resources/base.css">
<style type="text/css">
P.test {background: white; font-size: 20px;
        margin-left: 30px; margin-right: 10px; padding: 0; border: 0;}
IMG {padding: 0; border: 0; margin: 0;}
P.test IMG {float: left;}
#img2 {margin-top: 30px; margin-left: 30px;}
#img3 {margin-top: -30px; margin-left: -30px;}
#img4 {margin-right: 30px; margin-bottom: 30px;}
#img5 {margin-right: -30px; margin-bottom: -30px;}
</style></head>

<body><p>The style declarations which apply to the text below are:</p>
<pre>P.test {background: white; font-size: 20px;
        margin-left: 30px; margin-right: 10px; padding: 0; border: 0;}
IMG {padding: 0; border: 0; margin: 0;}
P.test IMG {float: left;}
#img2 {margin-top: 30px; margin-left: 30px;}
#img3 {margin-top: -30px; margin-left: -30px;}
#img4 {margin-right: 30px; margin-bottom: 30px;}
#img5 {margin-right: -30px; margin-bottom: -30px;}

</pre>
<hr>
<p class="test"> This paragraph should have a white background which
extends to the edges of the element's box.  There is no padding set on
this paragraph whatsoever.  If the background of the entire box is not
white, this may cause problems with the following tests; at any rate,
it must be taken into account. </p>
<p class="test">
<img src="../resources/crosshair.gif" alt="[Image]"> The image in
the upper left corner of this paragraph should be floated left, and
nothing more.  The edges of the white background should line up with
the top and left edges of the image.  This paragraph should have a
white background, first of all, which extends to the edges of the
element's box.  There is no padding set on this paragraph whatsoever. </p>
<p class="test">
<img src="../resources/crosshair.gif" id="img2" alt="[Image]"> The
image in the upper left corner of this paragraph should be pushed down
and to the right 30 pixels each from the upper left corner of the
paragraph's box, and displace the paragraph text accordingly.  This
paragraph should have a white background, first of all, which extends
to the edges of the element's box.  There is no padding set on this
paragraph whatsoever. </p>
<p class="test">
<img src="../resources/crosshair.gif" id="img3" alt="[Image]"> The
image in the upper left corner of this paragraph should be pushed up
and to the left 30 pixels each from the upper left corner of the
paragraph's box, thus causing the edges of the white background to
align with the thick gray lines in the image.  This paragraph should
have a white background, first of all, which extends to the edges of
the element's box.  There is no padding set on this paragraph
whatsoever. </p>
<p class="test">
<img src="../resources/crosshair.gif" id="img4" alt="[Image]"> The
image in the upper left corner of this paragraph should be floated
left, and the edges of the white background should line up with the top
and left edges of the image.  However, there should be 30 pixels of
space between the right and bottom edges of the image and the paragraph
text around it.  This paragraph should have a white background, first
of all, which extends to the edges of the element's box.  There is no
padding set on this paragraph whatsoever. </p>
<p class="test">
<img src="../resources/crosshair.gif" id="img5" alt="[Image]"> The
image in the upper left corner of this paragraph should be floated
left, and the edges of the white background should line up with the top
and left edges of the image.  However, the text should overlap the
image's right and bottom sides, lining up with the thick gray lines in
the image.  This paragraph should have a white background, first of
all, which extends to the edges of the element's box.  There is no
padding set on this paragraph whatsoever. </p>


<table border="1" cellspacing="0" cellpadding="3" class="tabletest">
<tbody><tr>
<td colspan="2" bgcolor="silver"><strong>TABLE Testing Section</strong></td>
</tr>
<tr>
<td bgcolor="silver"> </td>
<td><p class="test"> This paragraph should have a white background which
extends to the edges of the element's box.  There is no padding set on
this paragraph whatsoever.  If the background of the entire box is not
white, this may cause problems with the following tests; at any rate,
it must be taken into account. </p>
<p class="test">
<img src="../resources/crosshair.gif" alt="[Image]"> The image in
the upper left corner of this paragraph should be floated left, and
nothing more.  The edges of the white background should line up with
the top and left edges of the image.  This paragraph should have a
white background, first of all, which extends to the edges of the
element's box.  There is no padding set on this paragraph whatsoever. </p>
<p class="test">
<img src="../resources/crosshair.gif" id="img2" alt="[Image]"> The
image in the upper left corner of this paragraph should be pushed down
and to the right 30 pixels each from the upper left corner of the
paragraph's box, and displace the paragraph text accordingly.  This
paragraph should have a white background, first of all, which extends
to the edges of the element's box.  There is no padding set on this
paragraph whatsoever. </p>
<p class="test">
<img src="../resources/crosshair.gif" id="img3" alt="[Image]"> The
image in the upper left corner of this paragraph should be pushed up
and to the left 30 pixels each from the upper left corner of the
paragraph's box, thus causing the edges of the white background to
align with the thick gray lines in the image.  This paragraph should
have a white background, first of all, which extends to the edges of
the element's box.  There is no padding set on this paragraph
whatsoever. </p>
<p class="test">
<img src="../resources/crosshair.gif" id="img4" alt="[Image]"> The
image in the upper left corner of this paragraph should be floated
left, and the edges of the white background should line up with the top
and left edges of the image.  However, there should be 30 pixels of
space between the right and bottom edges of the image and the paragraph
text around it.  This paragraph should have a white background, first
of all, which extends to the edges of the element's box.  There is no
padding set on this paragraph whatsoever. </p>
<p class="test">
<img src="../resources/crosshair.gif" id="img5" alt="[Image]"> The
image in the upper left corner of this paragraph should be floated
left, and the edges of the white background should line up with the top
and left edges of the image.  However, the text should overlap the
image's right and bottom sides, lining up with the thick gray lines in
the image.  This paragraph should have a white background, first of
all, which extends to the edges of the element's box.  There is no
padding set on this paragraph whatsoever. </p>
</td></tr></tbody></table></body></html>