Welcome to WebmasterWorld Guest from 23.20.12.34

Forum Moderators: not2easy

Message Too Old, No Replies

Padding adding extra width. content not staying inside.

     
5:01 pm on Jul 20, 2013 (gmt 0)

Full Member

5+ Year Member

joined:Mar 22, 2008
posts: 317
votes: 0


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>
6:16 pm on July 20, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 0


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.
7:33 pm on July 20, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 21, 2002
posts:738
votes: 8


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.
8:30 pm on July 20, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:July 19, 2013
posts:1097
votes: 0


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.
12:18 am on July 21, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:13210
votes: 347


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.
12:31 am on July 21, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:July 19, 2013
posts:1097
votes: 0


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>
12:53 am on July 21, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:July 19, 2013
posts:1097
votes: 0


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>
1:56 pm on July 22, 2013 (gmt 0)

Full Member

5+ Year Member

joined:Mar 22, 2008
posts: 317
votes: 0


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.
5:00 pm on July 22, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:13210
votes: 347


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.
5:14 pm on July 22, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4988
votes: 12



Declared width + padding = total size.

Actually, it's more like this:
Margin + Border + Padding + Width = total size
7:08 pm on July 22, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:13210
votes: 347


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?)