Creating Space and Understanding the Box Model - CSS3 Foundations - page 118

The input fields with type text and email (which are in the newsletter box) now have a width of 100%, but be-
cause those elements also have padding, the same issue occurs as with the newsletter box itself.
In Figure 7-9, you can see that the input fields have a width of 100% + 2em because of the declaration padding:
.4em 1em;.
Figure 7-9 The input fields are not centered.
Rather than adjust values and use that negative margin-left hack as you did before, use the box-sizing prop-
erty to change how the box model is laid out instead:
1. In styles.css, add the following to the rule set input[type=”text”], input[type=”email”] :
box-sizing: border-box;
2. Save styles.css.
As yet, Firefox does not support the unprefixed box-sizing property. If you are using Firefox as your develop-
ment browser, please use -moz-box-sizing: border-box; instead. If using a different browser, you will
provide support for Firefox in Chapter 16.
And now, the input fields are exactly 100% wide and not a single pixel more, as you can see in Figure 7-10. You
don't even need to do any math. Freedom!