HTML and CSS Reference
In-Depth Information
Figure 7-15.
he browser has generated two empty paragraphs
To insert an image with a caption, you need to put the
<figure>
element between paragraphs like this (see
figcaption.html):
<p>
Nice is a jewel. . .
</p>
<figure class="floatleft">
<img src="images/nice_seafront.jpg" alt="Nice seafront"
width="400" height="266">
<figcaption>Nice seafront from la Colline du Château</figcaption>
</figure>
<p>
Tear yourself away. . .
</p>
Because the
<figure>
element is outside the paragraphs, you need to adjust the margins in the classes that
float elements to the left and right. The styles in figcaption.css contain these definitions:
figure.floatleft {
margin-left: 40px;
}
figure.floatright {
margin-right: 10px;
}
■
There's no space in the selector in the preceding style rules. if you put a space between the type
selector and the class, it becomes a descendant selector. For example,
figure.floatleft
targets any element to
which the
floatleft
class has been applied and which is nested at any level inside a
<figure>
element, whereas
figure.floatleft
, selects only
<figure>
elements to which the
floatleft
class has been applied. That tiny space
makes a huge difference in meaning.
Caution
