Figures from Chapter 7

Figure 7.1 -- An example document illustrating block elements.
Figure 7.3 -- Example document illustrating the use of div elements to group document content. The external style sheet content is listed here.
Figure 7.5 -- An example document illustrating the pre element.
Figure 7.7 -- An example document illustrating various list-related elements.
Figure 7.9 -- An example document illustrating the ins and del elements.
Figure 7.11 -- An example document illustrating the CSS white-space property.
Figure 7.13 -- An example document illustrating the :first-line and :first-letter pseudo-element-based selectors
Figure 7.15 -- An example document illustrating the line-height property, and the two modes of line height inheritance.
Figure 7.17 -- Example document illustrating CSS margin and padding properties applied to block elements.
Figure 7.20 -- An illustration of the box around a block element. The height is simply the distance between the top and bottom borders (these block elements are rendered with a padding of zero and a 1 pixel border)
Figure 7.21 -- An illustration of "too small" element box heights, and the effect of the CSS overflow property
Figure 7.22 -- Example document illustrating vertical margins between elements.
Figure 7.25 -- An illustration of the possible formatting within a list item box. (A) illustrates default formatting of unordered lists, while (B) illustrates formatting with list-style-position: inside and list-style-image: url(red2.gif). Finally (C) illustrates an ordered list with list-style-position: inside and list-style-type: lower-greek.
Figure 7.26 -- An illustration of background images and the effect of background-repeat.
Figure 7.27 -- Example document illustrating the use of the background-repeat property. The top example uses this property to create a sidebar graphic adjacent a block element (here a div). The CSS rules are described in the text. The third block uses background-position to change the starting location for the tiled images.