12).
Box Model Observation 1#:
Dimensioned boxes (width is speci-
?¬? ed) expand to occupy more horizontal
space as padding, borders,
and margins are added. Effectively,
the width property sets the width of
the box??™s content, not the box itself,
when the box??™s width is stated.
STYLIN??™ WITH CSS - CHAPTER 4 112
I??™ve colored the backgrounds of the heading and the paragraph so
you can see that they completely ?¬? ll the column horizontally. Block
level elements have a default size of auto, which effectively means
???as large as possible.??? Which leads us to the next observation.
FIGURE 4.12 Without any padding
applied to the container, the block
level heading and paragraph ?¬? ll the
width of the column.
FIGURE 4.13 Adding padding to the
containing element also adds width
to it. Note that the container is now
190 pixels wide. For clarity, I??™ve colored
the background of the div in the
pink color.
Faced with the text jammed against the sides of the column like this,
one??™s ?¬? rst instinct is to add some padding to the div to create some
breathing space around the type (Figure 4.13).
div#column {width:170px; padding:10px;}
As you can see from the ruler in the screenshot, the 10 pixels of
padding added to each side of the column has increased its width
to 190 pixels. While this neatly pads all elements inside the div away
from the edges with a single style, in order to keep the overall width
at 170 pixels, we would now have to subtract the corresponding
amount (10+10=20 pixels) from the current box width value and set
it to 150 pixels.
Pages:
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155