HTML and CSS Reference
In-Depth Information
These rules inherit the
float
and
margin
values from the earlier
floatleft
and
floatright
classes, but
override the left and right margins, respectively. Prefixing the classname with the
figure
type selector like this
has higher specificity (11) than the classname on its own (10). So, these rules apply only to
<figure>
elements,
whereas the existing classes can be applied to any other element you want to float.
Browsers don't apply default styles to
<figcaption>
elements, so figcaption.css contains this style:
figcaption {
display: block;
font-weight: bold;
padding: 10px;
text-align: center;
}
Figure
7-16
shows the result in figcaption.html in a modern browser.
Figure 7-16.
The image and caption are floated and styled correctly
Ti
■
most browsers that support the new HTml5 tags add a large default margin to the
<figure>
element. in
Chrome, it's
1em
on the top and bottom, and
40px
on both sides. The space around the image in Figure
7-16
is much
smaller because the
margin
property in the
floatleft
class overrides the browser default for
<figure>
. if your layout
doesn't look the way you expect, it's always a good idea to use the browser's developer tools to check whether
browser defaults have been applied to one or more elements.
Alas, not everyone uses a modern browser. IE 8 and earlier don't recognize the new HTML5 elements, so
they completely ignore any styles that you apply to them. Instead, the page looks like Figure
7-17
.