HTML and CSS Reference
In-Depth Information
The value of padding can be a percentage or any unit of length, but with it, unlike margin , you can't use the
auto keyword.
In Chapter 5, you added padding to the newsletter box, like so:
#newsletter {
padding: 6%;
This value gives each side of <form id=”newsletter” action=”#”> a 6% padding, which is a percentage
relative to the overall width of the newsletter box.
Now, because you haven't defined a width for the newsletter box, its width by default is auto. This auto set-
ting, as explained previously, tells the browser to calculate an element's width based on the unused space. The width
is calculated after the padding, so the calculated width of the newsletter box is 88% . Why so? Because each side of
the newsletter box has a 6% padding, meaning in total the left and right have 12% padding, leaving that figure 88%.
The way in which the box model is calculated seems—to me at least—more difficult than it needs to be, and I ex-
pand on this issue shortly so it doesn't catch you out.
As with margin , you can specify one to four values for padding :
• One applies to all four sides of an element.
• The first value of two applies to top and bottom and the second left and right.
• The first value of three applies to the top, the second to left and right, and the third to the bottom.
• Four values apply to top, right, bottom, and left, respectively.
Code Challenge: Add More Padding to Elements
In styles.css, do the following:
1. Add the declaration padding: 2.5em; to the #main rule set.
2. Add the declaration padding: 1em; to the .button rule set.
3. Remove the declaration of padding: 20px; from the .showcase .button rule set.
4. Add the declaration padding: .8em; to the input[type=”submit”][class=”button”] rule
5. Add a new rule set for .testimonials with the declaration padding: 1em 0 0 0; .
6. Add the declaration padding: .4em 1em; to the input[type=”text”], in-
put[type=”email”] rule set.
Project files update (ch07-02): 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 .
Search WWH ::

Custom Search