homepage Welcome to WebmasterWorld Guest from 54.161.191.154
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Padding adding extra width. content not staying inside.
webfoo

5+ Year Member



 
Msg#: 4594845 posted 5:01 pm on Jul 20, 2013 (gmt 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>

 

DrDoc

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



 
Msg#: 4594845 posted 6:16 pm on Jul 20, 2013 (gmt 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.

Hoople

10+ Year Member



 
Msg#: 4594845 posted 7:33 pm on Jul 20, 2013 (gmt 0)

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

WebmasterWorld Senior Member Top Contributors Of The Month



 
Msg#: 4594845 posted 8:30 pm on Jul 20, 2013 (gmt 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.

lucy24

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



 
Msg#: 4594845 posted 12:18 am on Jul 21, 2013 (gmt 0)

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

WebmasterWorld Senior Member Top Contributors Of The Month



 
Msg#: 4594845 posted 12:31 am on Jul 21, 2013 (gmt 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>

JD_Toims

WebmasterWorld Senior Member Top Contributors Of The Month



 
Msg#: 4594845 posted 12:53 am on Jul 21, 2013 (gmt 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>

webfoo

5+ Year Member



 
Msg#: 4594845 posted 1:56 pm on Jul 22, 2013 (gmt 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.

lucy24

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



 
Msg#: 4594845 posted 5:00 pm on Jul 22, 2013 (gmt 0)

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

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4594845 posted 5:14 pm on Jul 22, 2013 (gmt 0)


Declared width + padding = total size.

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

lucy24

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



 
Msg#: 4594845 posted 7:08 pm on Jul 22, 2013 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved