I really don't understand margin.

Usually a lot of problems, most of them know that they do not know why the cause. So, understand the principle, in the face of problems there is an analysis of the idea. Therefore, I hope that when we meet the non-standard problem, we should also call some bugs,
More to explore, why this problem arises. Solve the principle of what, do not solve the even if it is finished. Now the easy, will give you future growth buried hidden trouble.

And often the so-called Bug, is the specification, the understanding of the principle is not thoroughly caused.
So ask more why, although the ruler is short, but in time, will be inch.

This article mainly involves the following points of knowledge:

• Vertical margin Merge
• When to use Maigin, when to use padding
• Inline substitution elements and fee substitution elements
• Baseline of margin
• Physical size of the box, display size, logical size
• Floating Trigger Haslayout

Knowing this, I can say margin I know a bit. It's far from true to know. Here are some notes and summaries of your situation.

Detailed documentation can be found in the center of the circle, the Graceie article and the specifications on the World Series.

Http://www.planabc.net/2007/03/18/css_attribute_margin/Center

http://www.hicss.net/do-not-tell-me-you-understand-margin/Sea Jade

http://www.w3cplus.com/css/the-definitive-guide-to-using-negative-margins.html Desert Teacher Website

Thank the predecessors for their efforts.

2. Margin below, the parent element's background can be seen. It can be said that the margin of the place is transparent
   
4. When an element is in another element, and the parent element has nothing to do with the child elements (the parent element has border or padding can be separated by a child element ), the parent element and the child element's upper/lower margins are also merged.
   
   
   
6. Margin merging is only possible with the vertical margin of the block box in the normal document flow . Margins between inline boxes, floating boxes, or absolute positioning are not merged.
   margin Merge only occurs vertically , and the horizontal direction does not occur when the margin is merged .
8. 
   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.
   Like water, fusion after contact. But the size is the big one before.
10. according to the specification, if a box does not have a filler (padding-top) and a top border (border-top), then the top margin of the box and its internal in the document flow overlaps the top margin of the first child element .
    Note that leaving the document stream is not affected.

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. It's going to be one layer at a time. The trouble of "leading" (the parent element, the ancestor element), the margin of his own margin to be executed

There are special types of elements: such as Img|input|select|textarea|button|label, they are called replaceable elements (replaced Element)

2. 
   They distinguish between the general inline elements (in contrast, the non-replaced element): These elements have intrinsic dimensions (intrinsicdimensions), and they can set width/height properties. Their nature is consistent with the elements that set the Display:inline-block.
   Margin can also be used for inline elements, which is allowed by the specification, but Margin-top and margin-bottom have no effect on the height of the inline element (to the row), and because the boundary effect (margin effect) is transparent, he has no visual impact.
4. It is useless to set up and down margin for non-replacement elements in the row. Moreover, the inline elements do not occur with margin merges. The margin merge is only in the vertical direction.
   You'll take a seat.
   In-line replacement element, you can set the width of the high, margin will also have effect. And there is no margin merge in the horizontal direction, or that sentence, the margin merge is only in the vertical direction.
6. The margin property can be applied to almost all elements except the table display type (excluding table-caption, table and inline-table) elements, and the vertical margin pairs non-displaced inline elements (non-replaced inline Element) does not work.
   Permutation elements (replaced element) mainly refers to IMG, Input,textarea, select, object and so on, such as the default CSS formatting elements of the outer range.
8. What is a reference line? The reference line is the Datum point for the margin movement, which is stationary relative to box. The margin value is the amount of the box's displacement relative to the reference line.

From the above we can see that both top and left are outside elements for reference , while right and bottom are referenced by this element . The displacement direction above refers to the situation when the margin value is positive, and if it is negative, the displacement is in the opposite direction.
Box the actual size = Box the physical size + positive. margin

This is only valid for the elements themselves, and for the related elements behind them, they are laid out only in the logical size of the margin .

Conclusion:

Box's final display size equals the size of box's border and border plus a positive margin value. A negative margin value does not affect the actual size of the box, and if the negative top or left value causes the box to move up or down, the negative bottom or right will only affect the reference line shown in the box below.

The actual logical size is calculated according to the edge.

1. Baseline, logical size, physical size, display size.
   The baseline is the key to margin. After the logical size changes, the next block baseline position is changed, and the final position is the baseline position. Especially above and to the left.
2. inline element, set the float, you can set the width of the high
   Floating properties such as float:left allow the inline element to haslayout, allowing the inline element to behave like inline-block elements, supporting high widths, vertical margin and padding, etc.

IE6/7/8 Bottom Auto Margin center bug:

Occurrence: Set margin auto to block element cannot be centered solution: The cause of this bug is usually no doctype, then triggered the IE quirks mode, plus DOCTYPE declaration on it. In the "Beat IE Sunflower Treasure Book" In the method is to add a width to block elements can be solved, but according to my own test, plus with this method is invalid, if there is no doctype even add width to the element can not let the block element center.

Principle analysis: Missing DOCTYPE declaration.

IE8 Next Input[button | submit] Settings Margin:auto cannot be centered
Occurrence: Under IE8, if a label such as button (such as button input[type= "button"] input[type= "Submit") set {display:block; margin:0 auto;} If you don't set the width, you can't center.
Workaround: You can add a width to input
Principle Analysis: IE8 browser bug.

IE8 percent padding vertical margin bug:
Occurrence: When the parent element sets a percentage of padding, the child element has a vertical margin, as if the parent element was set to margin.
Workaround: Add a Overflow:hidden/auto to the parent element.
Principle Analysis: IE8 browser bug.

I really don't understand margin.