ptg16476052The Box Model 1778
they appear in the CSS document, so you can use styles like this to change the properties
of just one side :
Input ▼
p {
border: solid 2px red ;
border-bottom: dashed 4px green;
}
The results are shown in Figure 8. 6.
Output ▼
If you want to experiment with border styles, colors, and widths, you can open the exam-
ple page in the Developer Tools and modify the styles directly.
Margins and Padding
In the box model, there are two ways to control whitespace around a box. Padding is
the whitespace inside the border, and the margin is the whitespace outside the border,
separating the box from surrounding elements. Let’s look at an example that illustrates
how padding and margins work. The web page that follows has one
nested within
another. The outer
another. The outer
has a solid black border; the inner
has a dotted black bor-
der. The page appears in Figure 8.7.
Nested Elements
der. The page appears in Figure 8.7.
Input ▼