To create layouts that are more
interesting than this default XHTML layout presented by the
browser, you need to understand how to control the appearance
and placement of element boxes. Step one is to understand the
box model (Figure 4.2), which de?¬? nes the properties that make up
each box.
To learn more about the box model
see http://www.w3.org/TR/RECCSS2/
box.html.
POSITIONING ELEMENTS 103
You can adjust three aspects of the box with CSS:
??? Border. You can set the thickness, style, and color of the border.
??? Margin. You can set the distance between this box and adjacent
elements.
??? Padding. You can set the distance of a box??™s content from its
border.
A simple way to think about these properties is that margins push
outward from the border and padding pushes inward from the border.
Because a box has four sides, properties associated with margin, border,
and padding each have four settings: top, right, bottom, and left.
The Box Border
Border has three associated properties:
??? Width. This includes thin, medium, thick, or any unit (ems, px, %,
and so on).
??? Style. This includes none, hidden, dotted, dashed, solid, double,
groove, ridge, inset, and outset.
??? Color. This includes any color value (for example, RGB, hex, or
keyword).
FIGURE 4.2 This box model diagram
shows the relationship between
margins, border, and padding of an
XHTML element.
Pages:
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145