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

The CSS Box Model

Box Model Examples

Manipulating the display property
Figure 9-6: Box model individual sides
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 chp9files.zip to work on the hands-on projects.

Individual Case Project

Create the box element box model 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 HTML 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 HTML pages that reflect the enhanced design

Team Case Project

Work with your team to decide on the box model conventions for your project Web site. These include any spacing specifications for your content that will increase legibility and clarity. You may need to create sample mock-up HTML pages to present your ideas on these characteristics to your team members. Decide on margins, borders, and padding and how you will use these in your Web site. Think about creating floating boxes within sections for text highlights, how to standardize the look of different sections of your site with increased white space, and how borders can help to emphasize headings and columns.

After you have reached a general consensus, go back to work on the page template on which you are currently working. Create more finished mock-ups of your page design. Trade the page layout examples with your team members to reach consensus.

Top