In some cases, we set margin:0;padding:0, and then find that there are still gaps between elements, but check the style, box model and so on, and find that there is no problem.

Why is that?

Cause: There are newlines or spaces between two inline elements.

The code is as follows: (first CSS style, then HTML code, analysis found that there is indeed a line-break operation)

.intr-list li{
    /*float: left;*/
    display: inline-block;
    width: 200px;
    background-color: red;
}

        <div class="introduce">
            <ul class="intr-list">
                <li>
                    <img src="./images/shiyong_default.png">
                    <p>0 element</p>
                    <p>Free trial</p>
                </li>
                <li>
                    <img src="./images/shiyong_default.png">
                    <p>0 element</p>
                    <p>Free trial</p>
                </li>
                <li>
                    <img src="./images/shiyong_default.png">
                    <p>0 element</p>
                    <p>Free trial</p>
                </li>
                <li>
                    <img src="./images/shiyong_default.png">
                    <p>0 element</p>
                    <p>Free trial</p>
                </li>
                <li>
                    <img src="./images/shiyong_default.png">
                    <p>0 element</p>
                    <p>Free trial</p>
                </li>
                <li>
                    <img src="./images/shiyong_default.png">
                    <p>0 element</p>
                    <p>Free trial</p>
                </li>
            </ul>
        </div>

The results are as follows: (at this time, the element overflows the parent element due to the existence of newlines)

 

Solution:

1. Remove whitespace or newlines from your code (but the code gets ugly)
2. Use float:left for floating settings (remember to clear floats)

After resolving the rendering (using float, you can delete display attribute by using float):