Chapter 9 - Using the Box Properties

In this chapter you will explore the CSS box properties. These properties let you control the margin, padding, and border characteristics of blocklevel elements.To understand how these properties work, you will first learn about the CSS visual formatting model and 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 floating text boxes.

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

• Understand the CSS visual formatting model
• Use the CSS box model
• Use the margin properties
• Use the padding properties
• Use the border properties
• Use the special box properties
• Apply the box properties

Box Model Examples

Figure 9-7 Using the margin property
Figure 9-8 Using the individual margin properties
Figure 9-9 A <p> element with negative left margin
Figure 9-10 An <h1> element with negative bottom margin
Figure 9-11 The browser collapses vertical margins
Figure 9-12 Default padding and 2 em padding
Figure 9-13 Using the individual padding properties
Figure 9-14 The different border styles
Figure 9-15 Different border widths
Figure 9-16 A floating text box
Figure 9-19 Using the clear property

Exercise File

• Download the file boxtest.htm to work on the "Applying the Box Properties" project starting on page 317.
• Download the file float.htm to work on the Hands-On Project 3.

Case Project

Create the box element spacing conventions for your Web site. Build on the typographic classes you created in Chapter 7. Think about the different spacing requirements for your content and decide how the legibility can be enhanced using the box properties. Add this information to the type specification XHTML page that shows examples of the different typefaces and sizes and how they will be used. Decide on margins, padding, and borders and which elements will benefit from their use. Create before and after sample XHTML pages that reflect the enhanced design.