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
set.
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
