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:
- Understand the CSS visual formatting model
- Use the CSS box model
- Apply the margin properties
- Apply the padding properties
- Apply the border properties
- Use the page layout box properties
- Create a simple page layout
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-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.