Page Layout with CSS - HTML5 with CSS3 - page 297

.intro { margin: 20px 5% 2em 5%; }
With two values, the first will apply to the top and bottom and the second will apply to the left and right. For
example, this rule adds a 20 pixel margin to both the top and bottom of the box, and a 5% margin to both
the left and right sides:
.intro { margin: 20px 5%; }
When there are three values, the first sets the top margin, the second applies to both the right and left
sides, and the third value sets the bottom margin:
.intro { margin: 20px 5% 2em; }
Padding is space between the content area and border, and you can specify padding in much the same
way as margins, with a separate declaration for each side of the box:
.intro {
padding-top: 1em;
padding-bottom: 1.5em;
padding-left: 20px;
padding-right: 40px;
}
Or use the shorthand padding property, with two, three, or four values. This rule applies no padding to the
top of the box, 10% padding to the left and right sides, and 1.5 ems of padding (which is one and a half
times the height of the current font size) to the bottom:
.intro { padding: 0 10% 1.5em; }
Borders
A border is a decorative line drawn around the outside of a box and it has three distinct characteristics: a
width, a style, and a color. You can declare each of them separately for each side of a box:
.intro {
border-top-width: 3px;
border-top-style: dashed;
border-top-color: red;
border-right-width: 1em;
border-right-style: dotted;
border-right-color: blue;
}
You can see that this might become a pretty verbose style rule by the time you make it all the way around
a four-sided box. Thankfully there are a number of shorthand properties for borders to save you a lot of
typing. You can declare all three traits in a single declaration, declaring each side separately:
.intro {
border-top: 3px dashed red;
border-right: 1em dotted blue;
border-bottom: 1px solid orange;
border-left: 0.25in double green;
}