Box model
We layout inside everything imaginable into a box, inside the box and filled with small box, small box inside another box filled with small ......
so things based on the layout of the box. Even a small element of p, it can also become an abstract box.
You now have a lot of questions my heart, it does not matter, then look.
The following is the standard box model. ( Source )
We usually add to the element of width, height to the content area is actually widening and high. We increased both inside and outside the margin of time does not change the size of the content area, but it will change the overall size. If we add a 1 pixel box elements, then we can see just inside the box things (content area + padding), if you add background on the element, the background will be applied to this area, the outer margins it is not visible, which is used to separate the individual elements.
Although the margins are not visible, but when we count the elements of the total width or height of the total, to add the margins.
which is:
height总=margin-top+border+padding-top+height+padding-bottom+border+margin-bottom
width总=margin-left+border+padding-left+width+padding-right+border+margin-right
If only the visual size of the fixed frame without added margin calculation. Here and "Mastering CSS advanced web standard solutions (Second Edition)" There are different opinions. (P39-P40, I think the book error)
Margins of merger
What is consolidation
From the outside in case there is superimposed a maximum take both as a spacer
The problem is the premise of the merger
In the normal stream of two or more block elements in the vertical direction on the encounter bold text , it will cause the marginfold
Removed outside the normal stream, two or more block elements, vertical well understood
To properly explain this encounter, and what it considered to meet?
Simply put, that is nothing more than two elements come together. This encounter is really encountered, if there is a border barrier, etc. , is folded not going to happen!
Specifically, divided into:
Ⅰ: Upper outer and upper margins of the first child element of the parent element from
It is probably the effect of the picture:
Which is the parent element margin-topand the child element of the first margin-topencounter,
Look at the code:
HTML:
<div class="father">
<div class="son"></div>
</div>
CSS:
/*为了效果更加明显，为body添加背景颜色*/
body{
background-color:#ccc;
}
.father{
background-color:blue;
height:100px;
width:100px;
margin-top:20px;
}
.son{
background-color:red;
height:20px;
width:20px;
margin-top:20px;
}Renderings:
You can see the red box below 20px supposed to be at the blue square, but it has merged!
This combination is sometimes a convenient, and in some cases has become a do not know where the bug. So later speaks how to eliminate this floating.
Ⅱ: the outer margins and the last child under the parent element from
Which is the parent element margin-bottomand the child element of a last margin-bottomoverlap encounter occurred.
Similar to the previous one, so not elaborate.
Ⅲ: the adjacent sibling elements
That is, two adjacent elements neighboring brothers margin-topand margin-bottomconsolidation occurred.
40px margins for the case of:
<div class="block1"></div>
<div class="block2"></div>
.block1 {
background-color:red;
height:50px;
width:50px;
margin-bottom:20px;
}
.block2 {
background-color:blue;
height:50px;
width:50px;
margin-top:20px;
}The actual effect diagram:
Thus, the adjacent elements compatriots merger did occur.
Ⅳ: empty element, on the margins of their own will and their own bottom margin close
<p style="margin-bottom: 0px;">这个段落的和下面段落的距离将为20px</p>
<div style="margin-top: 20px; margin-bottom: 20px;"></div>
<p style="margin-top: 0px;">这个段落的和上面段落的距离将为20px</p>
Thus the distance between the first element and a third p p elements to 20px
Prevent automatic merge
Starting from the definition would be a good understanding of this problem, we can start to explore several ways to prevent the merger from the perspective of mergers:
The first method: get rid of the normal stream
position:absolute;
float:left/right;
Second method: non-blocking elements into
The first article already mentioned can be used display:inline;to block elements into inline elements.
Note: this can be achieved, although in theory, but in addition to the picture elements within its line is not set width and height, but margin-top margin-bottomalso the failures, so I think it actually can not achieve.
In fact, in addition to the block elements and line elements, there is an element inline-block, which brings together the advantages of both. (Then there will be a special article summary.)
Therefore, the use display:inline-blockcan be achieved.
Avoid encounter
The most important prerequisite is that two elements meet, be possible to merge, we just need to take them off!
So what can the two intermediate margin meet it?
I give an illustration for the two cases.
It can be clearly seen, the only father and son to the situation in this way.
And the method is very obvious: Set in the parent element paddingor border!
For father and son element, there are still ways:
Clear float, overflow:hidden overflow:autoit can, about how to remove floating still not clear.
Father and son element method for
setting a clear float property
note
- If negative margins, the combined positive margins margin plus the minimum to the maximum negative margin (a largest absolute value) as the upper margin of the element 20px, margins -20px, the last element of the upper and lower 0px.
- In the case of actual, you can just write
margin-bottomormargin-topavoid this situation.
How to display a non-block elements?
For this reason I specifically wrote an article: a closer look at inline elements (you certainly do not know what) (later on the same link.)
Updates
2017.12.03 The first edition
2017.12.03 Second Edition, modify the layout, modify some important understanding, adding new inquiry.
2017.12.15 Third Edition, modify the layout, add some new thinking