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