Deep understanding of the negative value of margin in CSS-The Blue ideal of a match

Deep understanding of the negative value of margin in CSS-The Blue ideal of a match

× Directory [1] performance [2] overlapping [3] floating [4] locating [5] applications

Previous

The margin attribute is very commonly used in practice, and is also a place where there are many pitfalls at ordinary times. In the margin folding section, I believe many people have made moves for that reason. The negative value of margin is also a common function. Many special layout methods depend on it. It seems simple, but actually complicated. This article will detail and sort out the negative value of margin.

[Note] the basic knowledge about the margin section is now

Performance

Although margin can be applied to all elements, the display attributes are different and the performance is different.

[1] The block element can use the margin value in four directions.

[2] The value of margin used by the inline element in the upper and lower directions is invalid.

[3] The negative margin value of inline-block in the upper and lower directions does not appear to be valid.

[Note] the negative value of margin in the upper and lower directions of inline-block only seems invalid, which is related to its default vertical-align: baseline. When the vertical alignment property value is another value, different visual effects are displayed.

Overlap

The negative value of margin does not always overwrite the previous element. It is related to the display attribute of the element.

[1] When two block elements overlap, the latter element can overwrite the background of the previous element, but cannot overwrite its content.

[2] When two inline elements, or two line-block elements, or inline and inline-block elements overlap, the following elements can overwrite the background and content of the preceding elements.

[3] When the inline element overlaps with the block element, the inline element overwrites the background and content of the block element.

[4] When the inline-block element overlaps with the block element, the inline-block element overwrites the background of the block element, but cannot overwrite its content.

Floating

[1] When a block element overlaps with a floating element, its border and background are displayed under the floating element, and the content is displayed on top of the floating element.

[2] When an inline or inline-block element overlaps with a floating element, its border, background, and content are displayed on the floating element.

Positioning

[1] positioning element (position is not static) overwrites the background and content of other elements

[2] apply the relative attribute value to the inline element. because the nature of the element in the row cannot be changed, the upper and lower margin still have problems.

Application

[1] center horizontally and vertically

Because the percentage of margin is relative to the width of the contained block, an empty

And the absolute package is used to make the width and height of the element equal to the width and height of the element to be located.

.box{    position:relative;    width: 200px;    height: 200px;    background-color: lightgreen;    border: 2px solid black;}.out{    position: absolute;    left: 50%;    top: 50%;}    .in{    height: 100px;    width: 100px;    background-color: pink;    margin-left: -50%;    margin-top: -50%;}

    
        
Test content
        
    

[2] Alignment of list items

A layer of elements outside the list item. Use the negative value of margin to pull the last list item back.

ul{    margin: 0;    padding: 0;    list-style:none;}.box{    width: 200px;    background-color: pink;    }.list{    overflow: hidden;    margin-right: -10px;}.in{    float: left;    width: 60px;    height: 100px;    background-color: lightgreen;    margin-right: 10px;}

    
 
 
        
  
  
1
        
  
  
2
        
  
  
3
    
 
 
    

[3] three-column Adaptive Layout

The middle body uses double-layer labels and the outer layer

100% in width, floating, inner layer

Is the real body content, containing the margin value of about 210px. Both the left and right columns use a negative value of margin. The left column is left floating, and the margin-left is-100%, so that the left column is on the left of the page. The right column is floating on the left, and the size is Px in width.

html,body{    height: 100%;}body{    margin: 0;}.main{    width: 100%;    height: 100%;    float: left;}.main .in{    margin: 0 210px;    background-color: pink;    height: 100%;}.left,.right{    height: 100%;    width: 200px;    float: left;    background-color: lightgreen;}.left{    margin-left: -100%;}.right{    margin-left: -200px;}

[4] High layout with three columns

Set a large bottom padding for each column, eliminate the height with a negative margin with the same value, and then set overflow: hidden in the outer container.

body{    margin: 0;    overflow: hidden;}ul{    margin: 0;    padding: 0;    list-style: none;}.list{    overflow: hidden;    width: 100%;    height: 100%;}.main{    margin: 0 210px;    background-color: lightgreen;}.left{    width: 200px;    float: left;    background-color: pink;}.right{    width: 200px;    float: right;    background-color: pink;}.main,.left,.right{    margin-bottom: -9999px;    padding-bottom: 9999px;}

 
 
    
  
  
Few text on the left
    
  
  
More text on the right, more text on the right, more on the right, more on the right more text on the right, more text on the right, more on the right
    
  
  
Few intermediate texts