Say we want the border to be solid and
red on all four sides, but want the right and bottom sides thinner
for visual interest. We have to use two rules to achieve the desired
result: The ?¬? rst rule uses border to specify the styling common to
all four sides, and the second rule uses border-width to specify the
border width differences.
p.warning {border:solid #F33; padding:2px;}
p.warning {border-width:4px 2px 2px 4px;}
which results in Figure 4.4.
FIGURE 4.4 By splitting out the box??™s
styles over two rules, the box??™s sides
can have both common (color and
padding) and different (line width)
styles.
FIGURE 4.3 Here, because I want all
four sides to be the same, I can style
the border with the shorthand border
property. Some padding prevents
the text from touching the border.
Here I also add a couple of pixels of
padding all round to prevent the text
touching the border.
POSITIONING ELEMENTS 105
It is very helpful to temporarily display the border of a box during
development so that you can more clearly see the effects of styles
such as margin and padding. By default, the styles for element boxes
are: border width set to medium, border style set to none, and border
color set to black. Because the border style is set to none, the box
doesn??™t display. So, all you need to do to quickly display a paragraph??™s
box, for example, is write this
p {border:solid;}
This sets the border style to a solid line and the box displays; the
color and width are already set by default.
Pages:
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147