HTML and CSS Reference
In-Depth Information
Figure 7-14.
The <gure> breaks out, even though it is nested inside the paragraph
To understand why, you need to use the browser's developer tools again. When you inspect the HTML in
a browser's developer tools, you're not looking at the page's source code, but at the markup generated by the
browser. Figure
7-15
shows the HTML Safari generates when the page is rendered.
Because
<figure>
is flow content—in other words, a block-level element—Safari has automatically closed the
opening
<p>
tag (highlighted in Figure
7-15
). he
<figure>
and the following text are then rendered outside the
paragraph. Finally, an opening
<p>
tag is inserted to match the closing one (also highlighted in Figure
7-15
).
All modern browsers render the HTML the same way. As a result, when the
<figure>
element is floated to the
left, its parent element is the
<body>
, not the paragraph that it was incorrectly nested inside. That's why the image
and its caption are no longer left-aligned with the paragraphs.
