HTML and CSS Reference
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
<p> Nice is a jewel. . . </p>
<figure class="floatleft"> <img src="images/nice_seafront.jpg" alt="Nice seafront"
<figcaption>Nice seafront from la Colline du Château</figcaption>
<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:
■ 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.