Okay, super newbie question here…
If I have…
<div>
<p>Some text goes here…</p>
</div>
Two scenarios:
1.) If I add padding to the <div>, then I believe that causes the <div> to expand and become wider, right?
2.) If I add padding (or margins) to the <p> then I believe that it “squishes” the <p> inside of the <div>, but the <div>'s width is unaffected, right?
Debbie
Not necessarily. If the <div>'s parent element has a fixed width then your child div will retain it’s current width (assuming it’s set to 100%) and the content will be pushed inwards by the padding amount
The easiest, imo, way to learn is to set up a simple html/css test and play with the styles and see what effect they have.
In the mean time this is a good description of the css box model
Hm, not quite. Only if the child div has no width set will padding not add to its width. If it’s width is set to 100%, the padding will be added to its width and it will blow out of the container.
I’m confused.
But first off, can you please my original two questions, Ralph, and then I’ll come back to your latest point.
Debbie
But I’m not sure what turns them on. 
As webdev said, maybe. If it has a set width, then yes. But if it has no set width, then no.
2.) If I add padding (or margins) to the <p> then I believe that it “squishes” the <p> inside of the <div>, [b]but the <div>'s width is unaffected, right?
Yes, as long as no width is set on the <p>. If a width is set on the p (which it shouldn’t be, in most cases) then, like a div with a set width, the padding/margin will be added to the overall width of the p.
Yes that’s correct and clearer than my
(assuming it’s set to 100%)
which is misleading and what I meant was assuming it’s left at its default width, which of course is 100%.
Hopefully DD will do a simple test as suggested earlier and all should be revealed and made clear
Ha ha.
Okay, so I’m getting more confused here, so let’s turn to a real example…
Thanks to Paul O’ - and others - I have my 3-column layout tweaked and understood again.
My layout has 3 columns which are floats and position: relative. The Left and Right Columns are 200px. The Middle column has width: 100% and uses a -400px right-margin.
In the Left and Right Columns I want to add “boxes” that contain various things. (In the simplest of terms, think of how your SitePoint profile looks with its “My Messages”, “My Subscriptions” and “My Settings”.)
So, when I looked at my old code, I realized there are several ways to get the end effect I want, but then I was unsure of the “correct” technical way to do things?!
As it stands now, I have…
.box{
margin: 20px 0;
padding: 0;
border: 1px solid #AAA;
background-color: #FFFFCC; /* Buff */
}
Which means that my “box” is slammed up against the edges of the Left Margin.
Then inside the “box” I have…
p{
margin: 0.7em 0 0 0;
padding: 0;
text-align: center;
font-family: Helvetica, Arial, Sans-Serif;
line-height: 1.4em;
font-size: 2em;
font-weight: bold;
color: #F00;
}
Anyways, my goal is to just create a CSS “box” with content inside that is written the most logical way and that scales the best as seen in my other thread: Seeking Polymorphic CSS Class?!
Because a “box” may not always be constrained by a fixed-width Left Margin, I am thinking I should add the Padding to the <p>'s and do whatever is needed to keep the <div class=box"> at a predictable fixed width.
Hope I am making some sense here?! 
Thanks,
Debbie
See my edit above. The second set of code should be “p”…
Debbie
You have two sets of styles for .box there, which is a bit confusing. To keep the content of .box away from the sides of the column it’s in, just give it some padding but no width. It you want a border around it too, then perhaps add a border and margins as well.
I just don’t understand what this left margin thing is.
I was low on sleep and think the conversation may have drifted.
Let me back up!
I have a Left Column that looks like this…
#pageLeftCol{
position: relative;
z-index: 2;
float: left;
width: 200px;
}
So that means it is a Fixed-Width Column.
Questions:
1.) If I add 20px Left & Right Margins to my 200px Left Column, then the Left Column itself shouldn’t change, but the total width would increase from 200px to 20px+200px+20px=240px, right?
2.) If I add 15px Left & Right Padding to my 200px Left Column, then the Left Column should NOT grow since it is “fixed width”, right?
As far as my understanding, there would just be less room inside the Left Column (i.e. from 200px to 170px) or is that incorrect?
Thanks,
Debbie
P.S. BTW, I did read SitePoint’s Box Model article, however, it didn’t cover every question out there?!
Correct. The computed width will then be 240px.
Wrong. The computed width will be 230px. If you want your total width to be 200px, then you must subtract the padding from the width.
Total width = width + margin + padding + borders
Is there ever a way that adding Margins or Padding would NOT increase the Width of a Div/Column/Box?
Debbie
Yes. If you set your div to display:inline, because an inline element’s width is that of its containing block. In that case the margin and width values will not take effect unless the div is floated.
Okay, so this takes me back to my original question - which maybe I didn’t spell out…
If I have…
<div class="box">
<p>Some text goes here…</p>
</div>
Do I want to add padding to the <div> or do I want to add margins and/or padding to the <p>?
What are the consequences of each approach?
I had though in the past that adding padding to my <p>'s was pushing the text inwards and not screwing up my <div>'s widths, but apparaently I had that wrong.
My end goal is just to make good decisions so I have a layout that behaves well and is easy to maintain.
Since a good portion of my website will be content inside of “boxes”, I need to make sure that I am doing things the proper way as I re-factor my website.
Thanks,
Debbie
There is no “best” way, so it’s up to your very own preference and how you’ve set up your HTML.
Adding padding to your p will not affect the width of the container (div) unless you set a width on your p that is equal to the width of its container, so you didn’t have that wrong.
So, if your container is 200px wide and you set padding to your p (without specifying a width on your p) then the container remains 200px wide.
I find it more convenient to set padding on the layout container itself (div) instead of applying padding to various elements. I declare padding on a reusable div container once and be done with it. However, this is just my personal preference and is in no way superior or inferior to other methods. You could as well set padding to all elements. I prefer having all containers on my site to have the same padding and margins, which is why I set it on a generic layout div that will then be used for all content blocks that need a div container.
Without risking to confuse any more there is one point I would like to clarify and that is that the default width for block boxes (not absolutely positioned elements or floats) is actually width:auto and not width:100%.
That means you can add padding and borders to the element without increasing its overall dimensions. The width auto effectively means the usable width of the element is reduced by the padding or borders that you add. If the element was width:100% then adding padding and borders would make the element’s overall dimensions larger and in most cases would not fit in the space allocated for it.
If your outer div is 200px width then you can add padding, margins and borders to the inner p element and it will still fit inside that parent div because the p element’s width is auto and adjusts to fill the available space. If you add padding or borders to the parent div then that would increase the overall dimension of that parent div due to the fixed width.
I am sorta leaning both ways. Here is my thinking…
Setting Top/Bottom Padding for <p> seems to make sense, because you may want to adjust that for all copy on your site. However, setting Left/Right Padding on <p> seems problematic, because you may not always want a “gutter”.
So for that, I would say that you would apply Left/Right Padding to “boxes”. You could do the same for Top/Bottom, except then that has a multiplying effect with any Top/Bottom Padding you add to your <p>'s.)
The only downside to adding Left/Right (or Top/Bottom) Padding to a <div> is that is expands the <div>'s original size…
Debbie
Paul O’ to the rescue! 
Okay, a few things…
My Left Column is:
#pageLeftCol{
position: relative;
z-index: 2;
float: left;
width: 200px;
}
The purpose - in my mind - of #pageLeftCol, #pageMidCol_3, and #pageRightCol are that they serve as “containers” and nothing more. (They should not change their size, because my entire page structure builds off of them!)
I would like to add “boxes” inside of the Left Column.
A generic “box” would look like this…
.box{
width: auto;
border: 1px solid #AAA;
}
So, based on my understanding of what you said above, adding a 1px border would not affect my Left Column’s width of 200px, right?
Furthermore, if I added padding like…
.box{
width: auto;
[COLOR="#0000CD"] padding: 0 1em;
[/COLOR] border: 1px solid #AAA;
}
…would also not affect my Left Column’s width of 200px, right?
If your outer div is 200px width then you can add padding, margins and borders to the inner p element and it will still fit inside that parent div because the p element’s width is auto and adjusts to fill the available space. If you add padding or borders to the parent div then that would increase the overall dimension of that parent div due to the fixed width.
But if I have “boxes” inside of the Left Column, and like the <p> they have width: auto, then the parent Left Column should remain unaffected, right?
Debbie
If you have a parent container with a width of 200px and an inner container with a width set to auto (default, if no width is set), then margins, paddings, and borders do not affect the parent container.