HTML and CSS Reference
In-Depth Information
padding: 15px;
background: #ccc;
}
[...]
<img src="images/1.png" width="67" height="67" alt="1" />
<p>Here is some text after a left floated image for
➥
illustration purposes. Lorem ipsum dolor sit amet,
➥
consectetur adipisicing elit.</p>
Adding a 20-pixel margin around the floated image would create a
gutter between the opposite side of the floated element and the content
wrapping around it (
Figure 6.7
). After doing this, it is also obvious how
the rectangular box drawn by the paragraph including its border and
background color are not “wrapping.” Only the content inside of those
blocks is wrapping.
Figure 6.7
A margin placed
on the floated
element to create
space between
it and the
content wrapped
around it.
img {
float: left;
margin: 20px;
}
If multiple elements are floated and would appear along the same edge,
then they are arranged horizontally with the earliest element in the
