O'Reilly logo

CSS3 Foundations by Ian Lunn

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

chapter seven

Creating Space and Understanding the Box Model

The box model describes the layout of elements on a web page. In this chapter, you learn how margin, padding, and border affect the layout of the box model, making structuring a page easier.

green-frog_nobkgrnd.psd

Project files update (ch07-00): If you haven’t followed the previous instructions and are comfortable working from here onward or would like to reference the project files up to this point, you can download them from www.wiley.com/go/treehouse/css3foundations.

The Box Model

In Chapter 5, you used padding to create some space between the content and border of the newsletter box and changed the border properties. By making these changes, you affected the box model of the main newsletter element <form id=”newsletter” action=”#”>.

Now add some margin and padding to the footer to better understand these properties:

1. In styles.css, below the other declarations in the #footer rule set, add the following:

margin-top: 2.5em;

padding: 1.4em 0;

2. Save styles.css.

Here, you change the box model of the <footer id=”footer” role=”contentinfo”> element, as shown in Figure 7-1.

9781118425152-fg0701.eps

Figure 7-1 The footer element before and after adding the margin and padding properties.

Because the box model is invisible—it changes the visual layout of an element, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required