CSS Box model

We can think of the box as a container, for example, we can think of the HTML box as the country we live in, and the body, head, p, div and so on can be imagined as a variety of houses in our lives. It is because of the various houses and objects in our life that make our world colorful. Margin is equivalent to the space between the House and the House, border is equivalent to the walls of the house, all the items in the House as a whole content, and padding is the space between the goods and walls.

Standard mode

As shown in the standard box model width=content wide, height=content high.

IE mode

IE mode:
width=content+ Transverse border+ Transverse padding
Longitudinal border+ longitudinal padding of width=content+

CSS Box Model Overview

(1) When the unified shorthand attribute is in order: Top (top) Right (Buttom) down (left)
Such as:

Padding-top:1px;Padding-right:2px;Padding-buttom:3px;Padding-left:4PX; abbreviated to padding:1px 2px 3px 4px; Margin-top1px; Margin-right2px; Margin-buttom3px; Margin-left4px, abbreviated to margin:1px 2px 3px 4px; border-width, border-style, border-color, abbreviated border: Width ( width) style (style) color (color);   

Margin is always transparent. Margin you can set the top, right, bottom, and left margins by using a separate property. namely: Margin-top, Margin-right, Margin-bottom, Margin-left.
The value types for margin margin-width are: auto | Length | Percentage You can also use the shorthand margin property to change all margins at the same time: margin:top right bottom left; (eg:margin:10px 20px 30px 40px) The memory mode is a clockwise "up-and-down" memory around the element.
And the specification also provides the ellipsis of the numerical notation, basically as follows:

If the margin has only one value, the margin in the upper right-bottom left is the same as this value. For example: margin:10px; is equal to margin:10px 10px 10px 10px;

If margin has only two values, the first value represents the up and down margin value, and the second value is the value of left margin. For example: margin:10px 20px; is equal to margin:10px 20px 10px 20px;

If the margin has three values, the first value represents the margin value, the second value represents the value of the left and right margin, and the third value represents the value of the lower margin. For example: margin:10px 20px 30px; is equal to margin:10px 20px 30px 20px;

If the margin has four values, the four values correspond to the four margin values on the lower right and bottom left respectively. Example: margin:10px 20px 30px 40px;

In practice, it is not recommended to use three values of margin, one is easy to remember the wrong, the second is not easy to modify later, a start if written margin:10px 20px 30px, the future needs to change to 10px, right 30px, under 30px, left 20px, You have to take this margin apart. margin:10px 30px 30px 20px; laborious and not pleasing, as the beginning of the honestly written margin:10px 20px 30px 20px; Do not increase the cost of future re-development in order to save two bytes now.

CSS padding
CSS margins
CSS Border

(2) CSS margin merging issues
In short, margin merging means that when two vertical margins meet, they form an outer margin. The height of the merged margin is equal to the greater of the two of the height in which the merged margins occur.
(1) When an element appears on top of another element, the bottom margin of the first element is merged with the top margin of the second element. Please see:

Try it yourself.

(2) When an element is contained within another element (assuming that no padding or borders are separated from the margin), the upper and/or lower margins are merged. Please see:

Try it yourself.

(3) Although it may seem strange, margins can even merge with themselves
Suppose there is an empty element that has an outer margin, but no border or padding. In this case, the top margin and the bottom margin are met together, and they merge:

If the margin encounters the margin of another element, it also merges:

This is why a series of paragraph elements occupy very little space because all of their margins are merged together, forming a small margin.

(4) The outer margin may seem a bit strange at first, but in fact it is meaningful. Take the example of a typical text page consisting of several paragraphs. The space above the first paragraph equals the upper margin of the paragraph. If there is no margin merge, the margins between all subsequent paragraphs will be the same as the top margin and the bottom margin. This means that the space between the paragraphs is twice times the top of the page. If a margin merge occurs, the top and bottom margins between the paragraphs are merged together, so that the distances are consistent.

Note: Margin merges occur only in the vertical margins of a block box in a normal document flow. Margins between inline boxes, floating boxes, or absolute positioning are not merged.

In practical work, the vertical margin merging problem is common in the margin-top of the first child element to open the spacing between the parent element and the adjacent element of the parent element, and only under the standard browser (Firffox, Chrome, Opera, Sarfi) problems, IE is performing well. Example can see the following code (ie performance "normal", under the standard browser view "bug"):

<Htmlxmlns="Http://www.w3.org/1999/xhtml" ><Head><title> Vertical Margin Merge</Title><Style>. Top{Width160px;Height50px;Background#ccf;}. Middle{Width160px;Background#cfc;}. Middle. firstchild{Margin-top:20px;}</Style></Head><Body><Divclass= "top" ></div> <div class=  "middle" > <div class=" firstchild "> I actually just want to separate some distance from my parent element. </div> < div class= "SecondChild" ></div></div ></body></ HTML>             

If you follow the CSS specification, ie (IE6 and below) "good performance" is actually a wrong performance, because IE's haslayout rendering led to this "good performance" appearance. Other standard browsers exhibit a "problematic" appearance. Well, if you've read the W3shcool CSS outside of the merged article, it's easy to talk about it. The reason for this problem is that, according to the specification, if a box does not have a filler (padding-top) and a top border (border-top), the top margin of the box overlaps with the top margin of the first child in its internal document flow.

Besides, the white point is: The top margin of the first child element of the parent element margin-top if a valid border or padding is not touched. The trouble of "leading" (parent element, ancestor Element) can be found in a layer. As long as the leadership to set an effective border or padding can effectively control the goal of the non-leader of the margin to prevent it leapfrog, false preach Imperial decree, their own margin when the leader of the margin execution.

The solution for vertical margin merging has been explained above, adding a border-top or padding-top to the middle element in the parent element example to solve the problem.

In general, this problem is explained here, most of the article will not go further, but as a real-life developer, the most is to know its why, the original use of margin-top is to separate from the parent element distance, and according to your such a solution, is actually a "repair", in order to "repair" This parent-child vertical margin Merge This CSS specification "Bug", and forcing the use of border-top and padding-top on the parent element, uncomfortable, and not easy to remember, the next time this situation will still forget this rule, And in the design of the page if you do not need to border-top add an upper border, so a plus instead of the lily, for later changes left hidden trouble.

The margin merger
Reference Original 1
Reference Original 2

CSS Box model