A brief discussion on CSS blocking merging and other effects

Non-orthogonal margins

When margin is used, it will cause merging

The following properties will prevent margin merging:

border

display: table

display: flex

The above content is the result of the detailed explanation below

Blocking merger [Detailed explanation]

/* CSS */

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

<!-- HTML -->

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

This is what it looks like in the browser:

According to the rational number margin, the spacing between the top and bottom of the div should be 20px

Solution 1:

<!-- HTML -->
<!-- css unchanged -->

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

This is what it looks like in the browser:

<!-- 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 merging, only table flex can -->

This is what it looks like in the browser:

Other Impacts

display will affect the small dots of ul li

position: absolute will affect display: inline

position: fixed will affect transform

float affects inline

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.