Figures from Chapter 6
- Figure 6.1 -- Example document showing
default behavior of inline images.
- Figure 6.3 -- Example document showing
the effect of white space around img elements.
- Figure 6.4 -- Example document showing
the effect of border attributes for img elements.
- Figure 6.5 -- Example document
illustrating image transparency: the "transparent" image has a transparent
background, while the non-transparent one has a white background. Note
how the transparent image can be used against different background colors
(here a gray background).
- Figure 6.6 -- An example
illustrating some common uses of inline images both as item bullets
and as icons to designate the type of a link.
- Figure 6.7 -- Example document
illustrating the various img element align attribute values.
- Figure 6.8 -- Example document
illustrating CSS-based control of image size and image rescaling.
- Figure 6.10 -- Example document
illustrating CSS-based vertical image alignment and image scaling .
- Figure 6.12 -- Example document
illustrating CSS-based padding and border properties applied to
inline images.
- Figure 6.14 -- An illustration
of vertical-align properties applied to inline span elements (each span
is in gray, and in boldface). The property value for each span is
indicated by the text content. The word "Big" at the beginning of
each line provides extra line height so that the effect of these
properties is more pronounced.
- Figure 6.15 -- Example document
illustrating padding, border, and background properties applied to
inline text elements.
- Bonus figure:
img-align-test.html --
Example document illustrating attribute-based alignment of inline
images. This can be used to test a browser's support for proper
these alignment values.