On the combination of CSS blocking and other effects

Time:2020-2-12

Nonorthogonal of margin

Merge occurs when margin is used

The following properties block the margin merge

border

display: table

display: flex

The above results are explained in detail below

Blocking merger

/* CSS */

    .box{
        border:1px solid red;
        height: 100px;
        Margin: 10px; / * Note: here is 10 pixels! * /
    }

<!-- HTML -->

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

The browser looks like this:

The rational number margin should be the interval between the top and bottom of div should be 20px

Solution 1

<!-- HTML -->
<! -- CSS unchanged -- >

<div class="box"></div>
< div style = "border: 1px solid blue" >
<div class="box"></div>
< div style = "border: 0.1px solid blue" >
<div class="box"></div>
<div class="box"></div>

The browser looks like this:

<!-- HTML -->
<! -- CSS unchanged -- >

<!-- HTML -->
<div class="box"></div>
<div style="display: table"></div>
<div class="box"></div>
<div style="display: flex"></div>
<div class="box"></div>
<div class="box"></div>
<! -- display: block / inline will not block the merge, only table flex can -- >

The browser looks like this:

Other influences

Display will affectSmall dots of UL Li

Position: absolute will affectdisplay:inline

Position: fixed will affecttransform

Float will affectinline

The above is the whole content of this article. I hope it will help you in your study, and I hope you can support developepaer more.