Book HomeCascading Style Sheets: The Definitive GuideSearch this book Friday 29th of August 2014 02:00:48 PM

Chapter 8. Visual Formatting

Contents:

Basic Boxes
Block-Level Elements
Floated Elements
Inline Elements
Summary

In the previous chapter, we covered a great deal of information on how CSS handles the visual formatting of a document. However, we did this in a mostly practical fashion: lots of explanation about how things work, with only a little lip service paid to the questions of why. In this chapter, we turn to the theoretical side of visual rendering, with only occasional references to the practical.

You may wonder why it's necessary to spend an entire chapter on the theoretical underpinnings of visual rendering in CSS. The main reason is to cover all the bases. I attempted to provide as many and varied examples as possible in the previous chapters, but with a model as open and powerful as that contained within CSS, no book could hope to cover every possible way of combining properties and effects. Every reader of this book will obviously go on to discover new ways of using CSS for their own document effects.

In the course of so doing, you may encounter what seems like strange behavior on the part of user agents. With a thorough grasp of how the visual rendering model works in CSS, you'll be able to determine whether the behavior is a correct (if unexpected) consequence of the rendering engine CSS defines or whether you've stumbled across a bug that needs to be reported. (See Appendix A, "CSS Resources", for details on how to report problems with rendering engines.)

8.1. Basic Boxes

In the rendering of elements, CSS assumes that every element generates one or more rectangular boxes, called element boxes . (Future versions of the specification may allow for nonrectangular boxes, but for now everything is rectangular.) Each element box consists of a content area at its core. This content area is surrounded by optional amounts of padding, borders, and margins. These are considered optional because all could be set to a width of zero, effectively removing them from the element box. An example content area is shown in Figure 8-1, along with the surrounding regions of padding, border, and margins.

Figure 8-1

Figure 8-1. The content area and its surroundings

Each of the margins, borders, and padding can be set using various properties, such as margin-left or about what happens when you're using a visible border style such as solid or outset. Things start to get interesting, though, when the border style is set to be none:

P {margin: 5px; border-style: none; border-width: 20px;}

As we can see in Figure 7-41, despite the fact that the border's width was set to be 20px , when the style is set to none, not only does the border's style go away, so does its width! Why? border-bottom. The content's background (for example, a color or tiled image) is also applied to the padding, while the margins are always transparent, allowing the background of any parent elements to be visible. In effect, the margins simulate the HSPACE and VSPACE attributes of images, although in a much more sophisticated fashion. Padding cannot be set to a negative value, but margins can. The effects of negative margins are explored later in this chapter.

The borders, on the other hand, have their own rules. Borders are generated using defined styles, such as solid or inset, and their color can be set using the border-color property. If no color is set, then the color of the border is based on the foreground color of the element's content. For example, if the text of a paragraph is white, then any borders around that paragraph will be white, unless a different border color is explicitly declared by the author. If a border style has "gaps" of some type, then the element's background is visible through those gaps; in other words, the border has the same background as the content and padding. Finally, the width of a border can never be negative.

There are differences in how different types of elements are formatted, however. Block-level elements are not treated in the same way that inline elements are, for example, and floated elements introduce a whole new level of complexity. Let's examine each type of element in turn.



Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.

In effect, there is a repeated column in the background, and there isonly one such column. Should you want two columns of symbols in thisexample, then the base image would have to be altered to containside-by-side symbols, as in Figure 6-30.

Figure 6-30

Figure 6-30. Tiling a slightly larger image on the vertical axis

The expected result occurs when we change the repeat value to berepeat-x:

BODY {background-image: url(yinyang.gif);in document design is repeat background images in both the horizontal
and vertical directions. If we wanted some kind of
"sidebar" background, it was necessary to create a very
short, but incredibly wide, image to place in the background; a
favorite size for these images is 10 pixels tall by 2,500 pixels
wide. Most of that image is blank space, of course. Only the left 100
or so pixels contain the "sidebar" image. The rest of the
image is basically wasted, as we can see in Figure 6-27.

Figure 6-27

Figure 6-27. Using a really wide image for a really small effect

Figure 7-85

Figure 7-85. Placing the bullets outside list items

Should you desire a slightly different appearance, though, you can pull the bullet in toward the content by setting the value to be inside:

LI.first {list-style-position: inside;}

This causes the bullet to be placed "inside" the list item's content. The exact way this happens is undefined, but Figure 7-86 shows one possibility.

If both margins are set explicitly, and width is auto, then the value of width will be set to be whatever is needed to reach the required total (that is, the content width of the parent element). The following markup is displayed as shown in Figure 8-13:

P {margin-left: 100px; margin-right: 100px; width: auto;}
Figure 8-13

Figure 8-13. Automatic width

This is the most common case, in fact, since it is equivalent to

Figure 7-80

Figure 7-80. Switching off list-item markers

list-style-type is inherited, so if you want to have different styles of bullet in nested lists, you'll need to define them individually. You may also have to explicitly declare styles for nested lists because the user agent's style sheet may already have defined such styles. Assume that a UA has the following styles defined:

UL {list-style-type: disc;}
UL UL {list-style-type: circle;}