horizontal formatting for block-level element

Question

In the "CSS The definitive Guide", the author said "The values of these seven properties must add up to the width of the element’s containing block, which is usually the value of width for a block element’s parent". But In the following, the child element is wider than the parent.

//html

<div class="wrapper">
    <div class="content-main">
        <div class="main">This is main</div>
    </div>
</div>

// style

        .wrapper {
            width: 500px;
            padding: 30px 0;
            border: 1px solid #0066cc;
        }

        .content-main {
            padding: 0 20px;
            border: 2px solid #00CC33;
        }

        .main {
            width: 500px;
            border: 1px solid #f00;
        }

So I have two quesions:

1. What does the author mean for the "seven properties must add up to the width of the element’s containing block".

2. Why in my example, the element will stick out the parent.

3. in the edit version, the seven properties add up to the width of the element' containing block seems work well. Why the equation not apply to my example?

EDIT VERSION

p.wide width is 438px, the author calculate as following

10px(left margin) + 1(left border) + 0 + 438px + 0 + 1(right border) – 50px(right margin) = 400px(parent width)

// HTML

<div>
  <p class="wide">A paragraph</p>
  <p>Another paragraph</p>
</div>

// CSS

div {width: 400px; border: 3px solid black;}
p.wide {
   margin-left: 10px; width: auto; margin-right: -50px;
   border: 1px solid #f00;
}

Answer 1

What does the author mean for the "seven properties must add up to the width of the element’s containing block".

He is teaching you CSS Box Model, here, you are using div elements which are block level in nature, block level means they take up entire horizontal space by default, unlike span or i or b tags, which are inline elements.

So when you use padding or border they are added outside of the element and not inside. So for example you have an element of say 100x100 in dimension, and you add a padding like

element {
   width: 100px;
   height: 100px;
   padding: 10px;
}

So in the above case, your element will be 120x120 in total, because it will add up 10px of padding on all four size of your element.

---

Explaining padding syntax

You have two different padding syntax, which are as follows...

padding: 30px 0; in .wrapper and padding: 0 20px; in .content-main so these aren't the same.

Both the above syntax are nothing but short hand syntax of padding ... The complete version looks like...

padding: 5px 10px 15px 20px; /*Nothing to do with your code, this is just a demo */

So in the above example, you have to go clock wise, so 5px is nothing but padding-top: 5px;, then comes 10px which is right, next is bottom and the last 20px is padding-left.

So what when it's just two parameters defined, that means...

padding: 0 20px;
      --^---^---
top bottom/left right

So, top and bottom are set to 0 here and right and left to 20px respectively...

---

Explaining the CSS

Note: None of the element has the height set by you, so the screens you see ahead which I've attached are computed. So ignore height in them completely.

.wrapper {
    width: 500px;
    padding: 30px 0;
    border: 1px solid #0066cc;
}

Here, your element is 502px wide, so why? As I said that border will add on all four sides of the element, and hence it will add 1px on all four sides but your padding is applied to top and bottom only. It's better to use tools like Firebug which will show you graphical presentation of what's going on behind the scenes.

---

Coming to the second snippet which has the following syntax

.content-main {
    padding: 0 20px;
    border: 2px solid #00CC33;
}

Here, it is now adding 2px border to your element but, the padding is now applied to left and right and nothing for top and bottom so now the computation will be

---

Coming to the last snippet which is

.main {
    width: 500px;
    border: 1px solid #f00;
}

Here, just border is applied, but why it goes out? In technical words, why it overflows? Because you have width defined. So since you have padding set for the parent element, which is padding: 0 20px;, so it will nudge the child element by 20px from the left side. I'll attach a screen of Firebug to show you why it is nudged....

Why in my example, the element will stick out the parent.

Because you are defining width of 500px to your .main div

Demo (What happens when you take out the width)

---

The default box model is known as content-box

This can be altered by defining a new CSS3 introduced property called box-sizing set to border-box which will alter your box-model in such a way that it will count the padding and border inside the element instead of outside