[ Pobierz całość w formacie PDF ]
for top border, etc.).
The perimeter of each of the four areas (content, padding, border, and margin) is
called an "edge", so each box has four edges:
content edge or inner edge
The content edge surrounds the element’s rendered content [p. 30] .
padding edge
The padding edge surrounds the box padding. If the padding has 0 width, the
padding edge is the same as the content edge.
border edge
The border edge surrounds the box’s border. If the border has 0 width, the
border edge is the same as the padding edge.
margin edge or outer edge
The margin edge surrounds the box margin. If the margin has 0 width, the
margin edge is the same as the border edge.
Each edge may be broken down into a top, right, bottom, and left edge.
The dimensions of the content area of a box -- the content width and content
height -- depend on several factors: whether the element generating the box has the
’width’ or ’height’ property set, whether the box contains text or other boxes, whether
2 Aug 2002 21:33
86
Box model
the box is a table, etc. Box widths and heights are discussed in the chapter on visual
formatting model details [p. 139] .
The box width is given by the sum of the left and right margins, border, and
padding, and the content width. The box height is given by the sum of the top and
bottom margins, border, and padding, and the content height.
The background style of the content, padding, and border areas of a box is speci-
fied by the ’background’ property of the generating element. Margin backgrounds are
always transparent.
8.2 Example of margins, padding, and borders
This example illustrates how margins, padding, and borders interact. The example
HTML document:
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
HTML
HEAD
TITLEExamples of margins, padding, and borders/TITLE
STYLE type="text/css"
UL {
background: yellow;
margin: 12px 12px 12px 12px;
padding: 3px 3px 3px 3px;
/* No borders set */
}
LI {
color: white;
/* text color is black */
background: blue;
/* Content, padding will be blue */
margin: 12px 12px 12px 12px;
padding: 12px 0px 12px 12px; /* Note 0px padding right */
list-style: none
/* no glyphs before a list item */
/* No borders set */
}
LI.withborder {
border-style: dashed;
border-width: medium;
/* sets border width on all sides */
border-color: lime;
}
/STYLE
/HEAD
BODY
UL
LIFirst element of list
LI class="withborder"Second element of list is longer
to illustrate wrapping.
/UL
/BODY
/HTML
results in a document tree [p. 30] with (among other relationships) a UL element
that has two LI children.
87
2 Aug 2002 21:33
Box model
The first of the following diagrams illustrates what this example would produce.
The second illustrates the relationship between the margins, padding, and borders of
the UL elements and those of its children LI elements.
First element of list
Second element of list
is longer to illustrate
wrapping
Content width of LI
First element of list
LI padding
Collapsed margin is
max(12px, 12px)=12px
Second element of list
is longer to illustrate
wrapping
LI padding
LI margins
UL padding
UL margins
Content width of UL
Box width of UL
2 Aug 2002 21:33
88
Box model
Note that:
The content width [p. 86] for each LI box is calculated top-down; the containing
block [p. 100] for each LI box is established by the UL element.
The height of each LI box is given by its content height [p. 86] , plus top and
bottom padding, borders, and margins. Note that vertical margins between the
LI boxes collapse. [p. 91]
The right padding of the LI boxes has been set to zero width (the ’padding’ prop-
erty). The effect is apparent in the second illustration.
The margins of the LI boxes are transparent -- margins are always transparent
-- so the background color (green) of the UL padding and content areas shines
through them.
The second LI element specifies a dashed border (the ’border-style’ property).
8.3 Margin properties: ’margin-top’, ’margin-right’,
’margin-bottom’, ’margin-left’, and ’margin’
Margin properties specify the width of the margin area [p. 85] of a box. The ’margin’
shorthand property sets the margin for all four sides while the other margin proper-
ties only set their respective side. These properties apply to all elements, but vertical
margins will not have any effect on non-replaced inline elements. Conforming HTML
user agents [p. 32] may ignore the margin properties on the HTML element.
The properties defined in this section refer to the margin-width value type,
which may take one of the following values:
length
Specifies a fixed width.
percentage
[ Pobierz całość w formacie PDF ]