In the book "CSS The definitive Guide", it is mentioned that "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". However, in the case provided below, the child element appears wider than its 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;
}
There are two questions that arise:
What exactly does the author mean by the statement "the seven properties must add up to the width of the element’s containing block"?
Why does the child element protrude from its parent in the given example?
In the revised version, where the seven properties do add up correctly, why does this equation not apply to the initial example?
EDIT VERSION
p.wide has a width of 438px, as calculated by the author with the following equation
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;
}