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:
What does the author mean for the "seven properties must add up to the width of the element's containing block".
Why in my example, the element will stick out the parent.
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;
}
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.
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...
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.