Getting Intimate with Elements - Head First HTML and CSS - page 385

Are we there yet?

Make sure you save your changes and reload the
page. You should see more padding on the left side
of the paragraph, and the text is now positioned
well with respect to the guarantee star. This is a
great example of where you use padding instead
of margins. If you need more visual space around
the content area itself, use padding, as opposed to if
you want space between elements or the sides of the
page, in which case, use margin. In fact, we could
actually use a little more margin on the right side to
set the paragraph off even more. Let's do that, and
then all we need to do is fix the border.

How do you increase the margin just on the right?

See the patt ern? There's a property
to control al l sides togeth er, and
properties fo r each side if you want
to set them individually.

You do this just like you did with the padding: add another property,
margin-right , to increase the right margin.

.guarantee {
line-height: 1.9em;
font-style: italic;
font-family: Georgia, "Times New Roman", Times, serif;
color: #444444;
border-color: black;
border-width: 1px;
border-style: solid;
background-color: #a7cece;
padding: 25px;
padding-left: 80px;
margin: 30px;
margin-right: 250px;
background-image: url(images/background.gif);
background-repeat: no-repeat;
background-position: top left;
}

Re member, we're already setting
th e margins to be 30 pixe ls.

And now we're going to ove rride that setting for the right
side , and set it to 250 pix els.

250 pixels

Add the new margin-right property and reload. Now the
paragraph should have 250 pixels of margin on the right side.