148) for the full details of this
quite complicated subject.
The Ultimate CSS Reference 146
Practical Considerations of the Box Model
An important point to note is that an element that has its width set to 100% (that is,
100% of the content width of its parent element) shouldn??™t have any margins,
padding, or borders applied, as this would make it far too big for the space that it
sits in. This is often overlooked by authors and can severely disrupt a page??™s layout,
as content will either overflow or push elements wider than they should be.
The solution, in most cases, is to avoid adding a value for the property width (other
than auto), and to apply the margins, padding, and borders only. The width property
of a static element will default to auto, and even with padding, borders, and margins
added, it will still assume the full available content width.
Of course, this approach may not be feasible in some instances, such as cases where
the element is not a static element, and requires the definition of a specific width
value (as in the case of a floated element that doesn??™t automatically expand to fill
its parent).
Pages:
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224