HTML and CSS Reference
In-Depth Information
Another test drive of the background image
Here we go again. This time, it looks like we're much
closer to what we want. But since this is a background
image, the text can sit on top of it. How do we fix
this? That's exactly what padding is for! Padding
allows you to add visual space around the content
area. Let's increase the padding on the left and see if
we can nail this down once and for all.
But
we'd re
ally like
for
the
text no
t to ru
n over
the
top of
the ima
ge.
How do you add padding only on the left?
For padding, margins, and even borders, CSS has a property for every
direction: top, right, bottom, and left. To add padding on the left side,
use the
padding-left
property, like this:
.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;
background-image: url(images/background.gif);
background-repeat: no-repeat;
background-position: top left;
}
We're usi
ng the pa
dding-lef
t proper
ty to
increase
the padd
ing on th
e left..
