Welcome to WebmasterWorld Guest from 54.144.126.195

Forum Moderators: not2easy

Message Too Old, No Replies

Padding adding extra width. content not staying inside.

     

webfoo

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

5+ Year Member



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

6:16 pm on Jul 20, 2013 (gmt 0)

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



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

7:33 pm on Jul 20, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

8:30 pm on Jul 20, 2013 (gmt 0)

WebmasterWorld Senior Member Top Contributors Of The Month



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

12:18 am on Jul 21, 2013 (gmt 0)

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



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

12:31 am on Jul 21, 2013 (gmt 0)

WebmasterWorld Senior Member Top Contributors Of The Month



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

12:53 am on Jul 21, 2013 (gmt 0)

WebmasterWorld Senior Member Top Contributors Of The Month



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

1:56 pm on Jul 22, 2013 (gmt 0)

5+ Year Member



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

5:00 pm on Jul 22, 2013 (gmt 0)

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



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

5:14 pm on Jul 22, 2013 (gmt 0)

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




Declared width + padding = total size.

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

lucy24

7:08 pm on Jul 22, 2013 (gmt 0)

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



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

Featured Threads

Hot Threads This Week

Hot Threads This Month