Head First HTML with CSS

testing the padding
A test drive with some padding
When you reload the page in your browser, you’ll notice the text
in the guarantee paragraph has a little more breathing room
on the sides now. There’s some space between the text and the
border, and it’s much easier to read.
Now you can see 25 pixels of space between the
edge of the text content and the border.
Now let’s add some margin
Margins are easy to add using CSS. Like padding, you can
specify the margin as a percentage or in pixels. You’re going to
add a 30-pixel margin around the entire guarantee paragraph.
Here’s how you do that:
.guarantee {
border-color: black;
border-width: 1px;
border-style: solid;
background-color: #a7cece;
padding: 25px;
margin: 30px;
}
402 Chapter 10
Notice that the background
color is under both the content
and the padding. But it doesn’t
extend into the margin.
We’re adding 30 pixels of margin to all sides of the
content (top, right, bottom, and left).