为什么margin:0;padding:0还是有缝隙

在一些情况下，我们设置了margin:0;padding:0，然后发现元素之间还是有缝隙，但是检查样式、盒模型等，发现都没有问题。

这是为什么呢？

原因：两个内联元素之间有换行或空格。

代码如下：（前为CSS样式，后为HTML代码，分析发现确实存在换行操作）

.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元</p>
                    <p>免费试用</p>
                </li>
                <li>
                    <img src="./images/shiyong_default.png">
                    <p>0元</p>
                    <p>免费试用</p>
                </li>
                <li>
                    <img src="./images/shiyong_default.png">
                    <p>0元</p>
                    <p>免费试用</p>
                </li>
                <li>
                    <img src="./images/shiyong_default.png">
                    <p>0元</p>
                    <p>免费试用</p>
                </li>
                <li>
                    <img src="./images/shiyong_default.png">
                    <p>0元</p>
                    <p>免费试用</p>
                </li>
                <li>
                    <img src="./images/shiyong_default.png">
                    <p>0元</p>
                    <p>免费试用</p>
                </li>
            </ul>
        </div>

结果如下：（此时由于换行的存在导致元素溢出父元素）

 

解决办法：

1. 去除代码中的空格或换行（但是代码会变得不好看）
2. 使用float:left进行浮动设置（记得清除浮动）

解决之后效果图（使用的浮动，使用浮动可删去display属性）：