CSS layout - margin overlap

1. Margin collapsing phenomenon:
For two adjacent block-level boxes in BFC (block formatting context), the bottom margin of the previous box will overlap with the top margin of the next box; three cases of margin collapse:
1. Adjacent sibling elements;
2. Parent and first/last element;
3. Empty block parent-child margin.
Other conditions for margin collapse
1. Other conditions for parent-child overlap
margin-top overlap:
1. Parent element is not a block formatting context (BFC) (eg: overflow: hidden);
2. Parent element has no border-top/padding-top Set;
3. There is no inline element separation between the parent element and the first child element.
Margin-bottom overlap:
1. The parent element is not a block formatting context (BFC) (eg: overflow: hidden);
2. The parent element has no border-bottom/padding-bottom setting;
3. The parent element and the last child element are between There is no inline element separation between them;
4. The parent element has no height, min-height, max-height restrictions.
Empty block element:
1. The element has no border setting;
2. The element has no padding value;
3. There is no inline element inside;
4. No height or min-height.
Calculation rules for margin overlap 1.
Positive and positive values are larger; 2. Positive
and negative values are added;
3. Negative and negative values are the most negative values; cn/archive/2012/11/16/2772562.html

2. Change the size
of margin 1. Margin and visual size (clientWidth) Margin
will affect the visual size but the following two cases will not:
a. Applicable to ordinary block elements without setting width/height;
b. Only applicable to horizontal size.
2. Margin is applicable to horizontal elements occupying the size
a.block/inline-block; b.It
has nothing to do with whether the width/height value is set ; c.Applicable
to both horizontal and vertical directions

2. Margin horizontal and vertical percentages
The percentage margins of common elements are calculated relative to the width of the container;
the percentage margins of absolutely positioned elements are calculated relative to the width of the first non-static parent element.
Second, a deep understanding of margin auto

If one side is a fixed value, one side is auto, and auto is the size of the remaining space.
If both sides are auto, the remaining space is equally divided - that is, centered

img{
    width: 20px;
    margin: 0 auto;
}

The picture is not centered, at this time the picture is inline level, even if there is width, it will not occupy the entire container row.

Note: Even if the container is set high, margin: auto 0; cannot be centered vertically, you need to write-model: vertical-lr to change the flow to the vertical direction.
E.g:

<head>
    <title></title>
</head>
<style>
     body{
        margin:0;
        padding:0;
    }
    .father{
        height: 200px;
        width: 1000px;
        writing-mode:vertical-rl;
        background-color: green;
    }
    .son{
        height: 100px;
        width: 500px;
        margin:auto;
        background-color:blue;
    }
</style>
<body>
<div class="father">
        <div class="son">SON</div>
    </div>
</body>
</html>

write picture description here

3. Application of negative margin
1. Align both ends under
negative margin Principle: The margin of the set width can change the width of its element, the
positive value makes the width smaller, and the negative value makes the width larger

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style>
     body{
        margin:0;
        padding:0;
    }
    .box{
        width: 960px;
        margin: 0 auto;
        background-color: orange;
    }
    ul{
        overflow: hidden;
        padding: 0px;
        margin-right: -20px;
    }
    li{
        width:225px;
        height: 300px;
        margin-right: 20px;
        background-color:green;
        float: left;
    }
</style>
<body>
<div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
</div>
</body>
</html>

write picture description here

Note: ul's overflow: hidden; cannot be omitted to implement ul BFC layout.
2. Equal height layout

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style>
     body{
        margin:0;
        padding:0;
    }
    .box{
        overflow: hidden;
        /* resize: vertical; */
        background-color: yellow;
    }
    .green, .orange{
        margin-bottom: -600px;
        padding-bottom: 620px;
        margin-left:100px;
    }
    .green{
        background-color:green;
        float: left;
    }
    .orange{
        float: left;
        background-color: orange;
    }
</style>
<body>
<div class="box">
        <div class = "green">Green</div>
        <div class = "orange">Orange</div>
</div>
</body>
</html>

write picture description here
Key technique: The outermost div uses a BFC layout, the inner container div has a large bottom border, and then uses a similar negative margin to eliminate this height. Set the box to overflow: hidden;, the columns are cropped at the highest point, give each element a bottom padding of 620px and a bottom margin of -600px, the difference of 20px is at the bottom of each box Forms visible padding.
3. Two-column adaptive layout with negative margin

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title></title>
</head>
<style>
     body{
        margin:0;
        padding:0;
    }
    .box {
        float:left;
        width:100%;

    }
    p{
        margin-right:170px;
    }
    img{
        float:left;
        width:150px;
        margin-left:-150px;

    }

</style>
<body>
<div class="box">
        <p>Green，我喜欢的喵咪，我喜欢的喵咪，我喜欢的喵咪，我喜欢的喵咪，我喜欢的喵咪，我喜欢的喵咪，我喜欢的喵咪，我喜欢的喵咪，我喜欢的喵咪，我喜欢的喵咪，我喜欢的喵咪，我喜欢的喵咪，我喜欢的喵咪，我喜欢的喵咪，我喜欢的喵咪</p>
</div>
<img src="1.jpg" alt="miao">
</body>
</html>

write picture description here
The space occupied by the element moves with the margin. The negative margin of img just reserves the widt width for the image.

CSS layout - margin overlap

Guess you like