Adding Presentational Styles - CSS3 Foundations - page 87

Figure 5-17 The newsletter box, with a background-clip of border-box.
If you want the painting area to start inside the border, you can apply the following to the #newsletter rule set:
background-clip: padding-box;
The “padding” of an element starts inside an element's border. In Figure 5-18, you can now see the border is black
with a 0.1 transparency (making it gray because the white of the main content area shows through).
Figure 5-18 The newsletter box, with a background-clip of padding-box.
Padding, which is covered in Chapter 7, adds space between the edge of an element and the elements or contents it
contains.
Add padding to the newsletter box:
1. In styles.css, add the following declaration to the #newsletter rule set:
padding: 6%;
2. Save styles.css.
There is now a significant space between the edges of the newsletter box and its content. What if you want the paint-
ing area to be only the background of the content? In that case, you can use the final background-clip value,
content-box , as shown in Figure 5-19.
Figure 5-19 The newsletter box with a background-clip of content-box and 6% padding.