Deep understanding of negative margin values in CSS and negative cssmargin values

Deep understanding of negative margin values in CSS and negative cssmargin values
* Directory [1]: [2] overlapping [3] floating [4] positioning [5] Before application

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 is invalid.

 

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] after applying the relative attribute value to an inline or inline-block element, the upper and lower margin of the element in the row cannot be changed.

 

Application

[1] center horizontally and vertically

Because the percentage of margin is relative to the width of the contained block, an empty <div> element is set outside the element to be centered and absolute is used for encapsulation, 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%;}

<Div class = "box"> <div class = "out"> <div class = "in"> test content </div>

[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;}

<div class="box">    <ul class="list">        <li class="in">1</li>        <li class="in">2</li>        <li class="in">3</li>    </ul>    </div>

[3] three-column Adaptive Layout

The middle body uses a double-layer label. The outer <div> width is 100% and floating. The inner <div> is the real body content and contains 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;}

<body><div class="main">    <div class="in"></div></div><div class="left"></div><div class="right"></div></body>

[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;}

<Ul class = "list"> <li class = "left"> less left text </li> <li class = "right"> more right text 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 </li> <li class = "main"> less intermediate text </li> </ul> </body>