It gets tiresome to keep changing the column width
every time you alter the column padding, especially with a multicolumn
layout.
An alternative is to apply identical margins to every element inside
the column, but again, that can mean a lot of elements to keep
Box Model Observation #2:
Undimensioned elements (no width
set) will always expand to ?¬? ll the
width of their containing element.
Because of this, adding horizontal
margins, borders, and padding to an
undimensioned element does cause
the content to change width.
POSITIONING ELEMENTS 113
track of and change if we decide to adjust the distance between the
column??™s sides and its content.
The simple solution is to add another div immediately inside the
column div
An h4 heading
The heading and this paragraph...
and apply the padding to this inner div instead, like this
div#column {width:170px; padding:10px;}
div#inner_column {padding:10px;}
This allows you to have a single style to control the column padding,
without having issues with the column changing width (Figure 4.14).
The inner div is undimensioned, so Box Model Observation #2
applies, and the content gets squeezed down. Now I can adjust the
one margin setting and move all the elements inside the column
away from its edge and the column??™s width remains unchanged.
Pages:
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156