HTML and CSS Reference
In-Depth Information
Figure 6.5
Two small
elements floated
inside text
content.
Margins and padding set on a floated element behave as they would on
any box in the standard box model and can be used to create a gutter
around that element. However, floating has the effect of interrupting
the boxes of the wrapping elements leaving their padding, margins, or
borders drawn in their normal rectangle, as shown in
Figure 6.6
, rather
than moved or redrawn for each individual row of text. Note the way the
text touches the right edge of the floated image in this example.
Figure 6.6
Text wrapped
around a floated
element.
img {
float: left;
}
p {
border: 5px solid #666;
