Use CSS3 in applications - Programming in HTML5 with JavaScript and CSS3 - page 247

different values specific to each side of the box. For example, the following code produces the
output shown in Figure 4-12:
p {
border-top: 15px solid black;
border-left: 10px solid black;
border-right: 10px solid black;
border-bottom: 5px solid black;
}
FIGURE 4-12 Different border properties for each side of the box
Padding and margin
Padding and margin are additional methods to create space around an HTML element. In
essence, there are three layers around an HTML element. As you look from the inside to
the outside of the element there is the padding, the border, and the margin. If you take a
look again at the sample in Figure 4-12, the text is squished quite close to the border. The
border width has been set, but the padding (the space between the text and the border)
has its default value of 0 px. In order to create space between the text and the border, you
must increase the padding as shown in the following code sample. The results are shown in
Figure 4-13.
p {
border-top: 15px solid black;
border-left: 10px solid black;
border-right: 10px solid black;
border-bottom: 5px solid black;
padding: 25px;
}
FIGURE 4-13 The use of padding to create space between text and a border