CHAPTER 12. BOX MODEL 127
Beginning webpage authors often create space by using
or
repeat-
edly, like this:
That does create a certain amount of vertical space on your webpage. But
it is fragile and identifies you as unskilled.
CSS provides a simple but powerful system for telling the browser just how
much space to leave, and how to fill it. Every web designer must understand
the box model.
12.1 The Basic Box
The CSS system is called
thebox model. It pro-
vides for an inner box that
is tightly fitted to the cen-
tral object, the core con-
tent you are displaying.
Around that are padding,
border, and margin.
Exam Question 215(p.349):List the three major components of the box
model.
Required Answer:padding, border, margin
The five components are content, padding, border, margin, and outline, but
when people talk about the box model, normally they are just talking about
padding, border, and margin.
12.1.1 Content
The inner-most part of the box is the content itself. It could be a picture or
a paragraph or a table or something more complex. Its dimensions may be
limited, or it may fill all the available space.
The other elements, padding, border, margin, and outline, are mostly empty.
Their sizes can be measured in actual pixels or as a percentage of the size
of the content, or in comparison to the size of the characters in the content.