Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

Lesson 3: Working with CSS properties CHAPTER 4 177

</p>

</body>

</html>

Figure 4-11 shows the rendered webpage. Notice the large gap between the text and the

border, which is the padding. The border is rather thick with its width setting of 10 pixels.

Outside the border, there is white space all around the paragraph, which is the margin prop-

erty setting of 15 pixels.

FIGURE 4-11 Controlling the margin, padding, and border properties

In addition to setting each of these properties to a value that controls all four sides, you

can specify each side and the value. For example, you can assign a different value to each side

of the border, as shown in the following style rule.

p {

border-bottom: 10px;

border-right: 5px;

border-left: 1px;

border-top: 0px;

padding: 25px;

margin: 15px;

background-color: yellow;

border-style: solid;

border-color: green;

}

In this example, the top border is not displayed because its width is set to 0 pixels. You can

also add -bottom, -top, -left, and -right to the padding and margin properties. There are also