ptg16476052The Box Model 1838
Each element is, by default, either a block element or an inline element, but CSS provides
the display property to allow you to change this behavior. The block property supports
three values: block, inline, and none. For example, if you want the elements in a list to
appear inline rather than each appearing on its own line, as shown in Figure 8.12, you use
the following style:
ul.inline li { display: inline; }
Setting the display property to none removes the selected elements from the page
entirely. Hiding elements with this property is useful if you want to use JavaScript to
dynamically hide and show items on the page. Using JavaScript to modify page styles is
discussed starting in Lesson 17, “Introducing JavaScript.”
There are two properties for controlling the size of a block: width and height. They
enable you to set the size of the box using any of the units of measurement mentioned
previously. If you use a percentage for the height or width, that percentage is applied to
the size of the containing element.
To make the header of your page 100 pixels high and half the width of the browser, you
could use the following rule:
#header { width: 50%; height: 100px; }
The following paragraph will appear to be very narrow, but the box in which it resides
will be as wide as the browser window unless you specify a width.
one.
two.
three.
It’s possible to set maximum and minimum heights and widths for elements to account
for differences in the size of users’ browser windows. The properties that enable you to
do so are max-width, min-width, max-height, and min-height. Let’s say you’ve created
FIGURE 8.12
Inline list items.