HTML and CSS Reference
In-Depth Information
It's time to take a little shortcut
You've probably noticed that there are quite a few CSS properties that seem to
go together. For instance,
padding-left
,
padding-right
,
padding-bottom
,
and
padding-top
. Margin properties are the same way. How about
background-image
,
background-color
, and
background-repeat
? Those all
set different property values on the background of an element. Have you also noticed
it gets a little tedious typing all those in? There are better things to spend your time
on than typing all this, right?
padding-top: 0px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 10px;
Well, here's a special bonus for this chapter. You're going to learn how to specify all
those values without risking carpal tunnel. Here's how:
He
re's th
e old-
school
way of
spe
cifying
your
paddin
g.
padding-top: 0px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 10px;
padding: 0px 20px 30px 10px;
You can use the same sort of shorthand with margins:
margin-top: 0px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 10px;
margin: 0px 20px 30px 10px;
If your padding or margins are the same value on all sides,
you can make the shorthand
really
short:
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding: 20px;
