Question

I have a simple div with a background color for it defined in CSS. There is some text that I wish to display over this div in a certain position, however when I pad the div it causes the background to shift as well:

#body {
   margin-left: 10px;
   background: red;
}

I just want the text to shift. How can I do this without using two div tags?

Thanks.

EDIT: Here is an example of what I’m working with: http://jsfiddle.net/qQxF2/

Answer 1

If you don’t have a border, use the padding instead of the margin.

#body {
    padding-left: 10px;
    background: red; /* this is not valid CSS! */
    background-color: red; /* this is valid */
}

The W3C has an extensive and (hopefully) accurate text on the box model and things like padding, margin, borders etc.