Chapter 6 - Box Properties

In this chapter, you will explore the CSS box properties. These properties let you control the margin, padding, and border characteristics of block-level elements. To understand how these properties work, you will first learn about the CSS visual formatting model and the box model. These models control the way content is displayed on a web page. Then you will learn about the margin, padding, and border properties and how you can use them to enhance the display of content in the browser. Finally, you will see how the special box properties—width, height, float, and clear—let you create containers for content that you can position on your web page. These box properties will become the basis for the page layout techniques you will learn about in the next chapter.

When you complete this chapter, you will be able to:

Box Property Examples

Figure 6-4: CSS Box Model Areas

Figure 6-6: Box Model Individual Sides

Figure 6-7: Using the Margin Property

Figure 6-8: Negative Margins on a Heading

Figure 6-9: Browser Collapses Vertical Margins

Figure 6-11: Default Padding and 2em Padding

Figure 6-12: Individual Padding Properties

Figure 6-13: Border Styles

Figure 6-14: Different Border Widths

Figure 6-15: Using the Border-Radius Property

Figure 6-16: Using Individual Border Radius Properties

Figure 6-17: Creating Varied Shapes Using Border-Radius

Figure 6-18: Using the Width Property

Figure 6-20: Using the Box-Sizing Property

Figure 6-21: Floating an Image

Figure 6-22: Floating Content Box

Figure 6-23: Normal Text Flow Aroudn a Floating Box

Figure 6-24: Using the Clear Property

Figure 6-25: Text Overflows a Box with Fixed Width and Height

Figure 6-26: Controlling Overflow with an Auto Scroll Bar

Figure 6-27: Paragraph Element with a Box Shadow

Figure 6-38: Paragraph Element with a Negative Box Shadow

Activity Files

Download the Chapter Six activity files.