The box model describes the positioning controls
that exist for every element in your markup. The position property
de?¬? nes the positional relationship between these elements on the
page. The display property determines whether elements stack or
sit side-by-side, or even display on the page at all. Let??™s look at each
in turn.
Understanding the Box Model
Every element you create in your markup produces a box on the
page, so an XHTML page is actually an arrangement of boxes.
By default, the border of each element box isn??™t visible and the background
of the box is transparent, so I understand if you??™re wondering
where all the boxes are. With CSS, it??™s easy to turn on the borders
and color the backgrounds of the boxes. You can then start to see
your page structure in a whole new light.
For example, here is part of the page we styled at the end of the last
chapter, only this time with the borders turned on (Figure 4.1).
FIGURE 4.1 With borders on, you
can see that the inline link elements
???shrink-wrap??? their text, but the
block-level list items that enclose
them stretch right across the page to
?¬? ll their containing element (except
where their margins prevent them
from doing so). Note also the negative
margins on the paragraphs make
them extend to the left out of their
element boxes.
In this example, we let the browser simply arrange the block and
inline elements down the page.
Pages:
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144