Padding adding extra width. content not staying inside.

[webfoo]

I needed to force the text away from the edge of the element so it wouldn't cover a certain part of the background-image, so I added some padding-left to the element. The text shifted over properly, but it actually made the whole element wider by exactly the same number of pixels. What is the issue here?

This happens on multiple kinds of elements, primarily <td> and <div>

[DrDoc]

That is standard. An element's "space" is exactly equal to its border + padding + width.

Each box has a content area (e.g., text, an image, etc.) and optional surrounding padding, border, and margin areas.

CSS Box Model [w3.org]

The width applies only to the content area itself.

[Hoople]

Been there, done that with the above. A point to remember is older versions of IE misbehave re 'box model' - read and reread online about how to avoid triggering 'quirks mode' to save lots of grief.

A second point to also keep in mind is these older versions have issues with rounding up/down (errors) and for that matter, how they handle decimal precision.

I personally compensate by making all the box parameters add up to not quite 100%. This allow for a bit of sloppiness in the browsers' results of rounding, esp if the actual 'space' exceeds 99.8% of what you've allowed for in your design.

[JD_Toims]

The text shifted over properly, but it actually made the whole element wider by exactly the same number of pixels. What is the issue here?

What they said above.

The fix to keep the box the same size is to put a margin on the text rather than padding the box.

[lucy24]

The fix to keep the box the same size is to put a margin on the text rather than padding the box.

But then you need two elements: an outer one to hold the background image, and an inner one to hold the text. If it's done with padding, you can stay with a single element.

I'm currently working on an e-book whose structure involves

<div class = "holder">
<div class = "primary">
<div class = "correction">
{content with multiple paragraphs here}
</div>
</div>
<div class = "apparatus">
<div class = "correction">
{content with multiple paragraphs here}
</div>
</div>
</div>

It drives me stark staring bonkers to have all those nests; if I could get rid of them, I would.

[JD_Toims]

But then you need two elements: an outer one to hold the background image, and an inner one to hold the text.

No you don't... All you have to do is increase the left margin of the <p> with the text to get it where you want it. You don't need a separate container for the text at all.

Try both, the text will stay at the same place in the box.

<div style="width:220px;border:1px solid #000;padding:0;margin:0;">
<p style="margin:0 0 0 40px;padding:0;">Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah </p>
</div>

<div style="width:220px;border:1px solid #000;padding:0;margin:0 0 0 20px;">
<p style="margin:0 0 0 40px;padding:0;">Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah </p>
</div>

If it's too wide on both sides, all you have to do is set a width on the <p> and auto margin on the left and right or set a margin on the left and right:

<div style="width:220px;border:1px solid #000;padding:0;margin:0 0 0 20px;">
<p style="width:140px;margin:0 auto 0 auto;padding:0;border:1px solid blue;">Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah </p>
</div>

<div style="width:220px;border:1px solid #000;padding:0;margin:0 0 0 200px;">
<p style="width:140px;margin:0 auto 0 auto;padding:0;border:1px solid blue;">Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah </p>
</div>

###

<div style="width:220px;border:1px solid #000;padding:0;margin:0 0 0 200px;">
<p style="margin:0 40px 0 40px;padding:0;border:1px solid blue;">Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah </p>
</div>

<div style="width:220px;border:1px solid #000;padding:0;margin:0;">
<p style="margin:0 40px 0 40px;padding:0;border:1px solid blue;">Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah </p>
</div>

[JD_Toims]

Same post with classes:

<style type="text/css">
div.text_indent_1 {width:220px;border:1px solid #000;padding:0;margin:0;}
div.text_indent_1 p {margin:0 0 0 40px;padding:0;}

div.text_indent_2 {width:220px;border:1px solid #000;padding:0;margin:0 0 0 20px;}
div.text_indent_2 p {margin:0 0 0 40px;padding:0;}

div.text_indent_3 {width:220px;border:1px solid #000;padding:0;margin:0 0 0 20px;}
div.text_indent_3 p {width:140px;margin:0 auto 0 auto;padding:0;border:1px solid blue;}

div.text_indent_4 {width:220px;border:1px solid #000;padding:0;margin:0 0 0 200px;}
div.text_indent_4 p {width:140px;margin:0 auto 0 auto;padding:0;border:1px solid blue;}

div.text_indent_5 {width:220px;border:1px solid #000;padding:0;margin:0 0 0 200px;}
div.text_indent_5 p {margin:0 40px 0 40px;padding:0;border:1px solid blue;}

div.text_indent_6 {width:220px;border:1px solid #000;padding:0;margin:0;}
div.text_indent_6 p {margin:0 40px 0 40px;padding:0;border:1px solid blue;}
</style>

<div class="text_indent_1">
<p>Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah </p>
</div>

<div class="text_indent_2">
<p>Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah </p>
</div>

<div class="text_indent_3">
<p>Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah </p>
</div>

<div class="text_indent_4">
<p>Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah </p>
</div>

<div class="text_indent_5">
<p>Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah </p>
</div>

<div class="text_indent_6">
<p>Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah Blah text blah blah blah </p>
</div>

[webfoo]

Thanks for your help! I was apparently under the misunderstanding that padding could only operate inside the element's defined "width", not add to the total space. Now I am clear.

[lucy24]

No you don't... All you have to do is increase the left margin of the <p> with the text to get it where you want it. You don't need a separate container for the text at all.

Uhm, your examples do have two elements: div on the outside, paragraph on the inside. The OP made it sound as if the background-image was on the same element as the text. If it's already on a different element, then of course padding vs. margin on the inner element makes no difference to the background.

I was apparently under the misunderstanding that padding could only operate inside the element's defined "width", not add to the total space. Now I am clear.

At least until the next time you forget which way it goes ;) Declared width + padding = total size.

[Fotiman]

Declared width + padding = total size.

Actually, it's more like this:
Margin + Border + Padding + Width = total size

[lucy24]

Oh, picky picky :-P Besides, the margin isn't technically part of an element, though you may have to include it when figuring out how much space the element takes up.

:: shuffling papers ::

http://www.w3.org/TR/CSS2/box.html#box-padding-area

(Moderators, I've intentionally de-linked because apparently our auto-linking eats fragments?)