A Brief Introduction to the negative margin function of css, cssmargin

A Brief Introduction to the negative margin function of css, cssmargin

A Brief Introduction to the negative margin function of css:
About the margin of margin, most friends may be familiar with it. Its function is to set the margin of the element.
The Code is as follows:

div{  width:100px;  height:100px;  margin:10px 5px 15px 20px;}

For more basic applications, see the section "margin attributes" in CSS.
However, many people do not know much about the features with the negative margin. The following is a brief introduction through code examples.
I. Impact on normal document streams:
For the basic concepts of document flow, see what is document flow 1.
That is to say, the element position in the Document Stream changes with the changes in the document stream. First, let's look at a simple code example:

<! DOCTYPE html> 
There should be no objection to the performance of the above Code. The following code applies the negative margin:
<! DOCTYPE html> 
As you can see, the size of the div element is not changed, but the text is directed to the div element.
The influence of the negative margin on the elements in the Document Stream is like this, which will offset the space occupied by the elements in the document stream, and the content of the subsequent Document Stream will fill the space for the offset, this is different from relative positioning. Even if the relative positioning is offset, the original space is retained, so the subsequent elements are not filled. The above code margin-bottom:-20px can be 20 PX of the Document Stream of the div element, so the text will fill the space for This rollback.
Summary: In a document stream, the final boundary of an element is determined by margin. When the value of margin is negative, it is equivalent to the element rollback. The Document Stream only recognizes the boundary, regardless of its actual size.
The code example is as follows:
<! DOCTYPE html> 
In the code above, you can click the button to set the internal div's margin-bottom value to-20px, then it will return 20 Px in the Document Stream, then the outer div element height will be reduced by 20 PX. However, it should be noted that the parent element must have overflow: hidden. Otherwise, although the document stream is rolled back, the height of the parent element is reduced, but it has no effect.
Ii. Influence of the negative margin on the width:
I will not discuss it here. For details, refer to the section on the effect of the negative margin on the width.
3. Influence of the negative margin on floating elements:
I will not discuss it here. For details, refer to the section on the impact of the negative margin on floating elements.
4. Influence of the negative margin on the positioning element:
I will not discuss it here. For details, refer to the section on the influence of the negative margin on the positioning element.
The original address is: http://www.softwhy.com/forum.php? Mod = viewthread & tid = 18295.
For more information, see: http://www.softwhy.com/divcss/