11)
p {width:400px; margin: 0 30px; padding:0 20px; border:#000
solid; border-width: 0 6px 0 6px; background-color:#CCC;}
POSITIONING ELEMENTS 111
FIGURE 4.11 Margins create space
around an element.
Adding margins, 30 pixels to each side, in this case, increases the
overall space occupied by the element since the margins are outside
of the box. However, although you might expect the border of the
box and the padding within not to increase the box??™s width, they do.
This behavior can have important implications if you build a layout
with multiple columns where the columns must maintain their
widths for the layout to work. ???Floated layouts,??? which you will learn
about in the next chapter, can display incorrectly if a column width
gets inadvertently altered by changes to the padding, margins, or
borders. Typically, you create a column in your layout using a dimensioned
(de?¬? ned width) div and then nest all the column??™s content
elements (headings, paragraphs, navigation lists, and so on) inside it.
CREATING A SINGLE COLUMN WITH CONTAINED ELEMENTS
To illustrate the basics of this technique, here??™s an example where
I have a div sized at 170 pixels with a heading and a paragraph
inside it.
An h4 heading
The heading and this paragraph...
and CSS for the div
div#column {width:170px;}
I??™ve added a ruler graphic along the top of the page so you can see
the width change as the CSS changes (Figure 4.
Pages:
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154