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

Custom Search