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..
Search WWH ::

Custom Search