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
<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>
<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.
Search WWH ::

Custom Search