7). This effect is
known as collapsing.
FIGURE 4.7 Vertical margins
collapse. They overlap until one
element touches the border of
the other.
Although vertical margins collapse,
horizontal margins do not. Instead,
horizontal margins act as you would
expect??”margin settings are added
together to create space between
horizontally adjacent elements.
POSITIONING ELEMENTS 109
This collapsing margin effect ensures that when an element is ?¬? rst
or last in a group of headings, paragraphs, or lists, for example, the
element can be kept away from the top or bottom of the page or the
containing element. When the same elements appear between other
elements, both margins are not needed, so they simply collapse into
each other, and the larger one sets the distance.
How Big Is a Box?
The way the box model works is at the heart of some of the most
frustrating aspects of CSS for beginner and expert alike. Note in
the discussion that follows that we are talking about block level
elements, such as headings, paragraphs, and lists; inline elements
behave differently.
Let??™s go step by step and review the box model in a little more depth.
We??™ll discuss setting the width of a box here, since managing element
width is critical to creating multicolumn layouts, but you can
also apply the same (il)logic to the height.
You can set the width of an element box (hereafter simply called a
box) using the width property
p {width:400px;}
Then you can turn the background color on so that you can see the
box without affecting its width in any way
p {width:400px; background-color:#EEE;}
Figure 4.
Pages:
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152