html - 为什么我的利润率下降代码不起作用？

我编写了一个简单的html文件，以查看CSS中页边空白的工作方式，但没有得到预期的答案。首先，我将向您展示我的代码：

<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <title>Collapsing Margins Testing</title>
    <style type="text/css">
        img {
            width: 300px;
            height: 300px;
        }

        .first {
            margin-right: 10px;
        }

        .second {
            margin-left: 20px;
        }
    </style>
</html>

<body>
   <img src="http://cdn.shopify.com/s/files/1/0051/4802/products/mona-2_1024x1024.jpg?v=1447180277" alt="github cat" class="first">

   <img src="http://cdn.shopify.com/s/files/1/0051/4802/products/mona-2_1024x1024.jpg?v=1447180277" alt="github cat" class="second">

</body>

我分别设置了第一个图像的右边缘10px和第二个图像的左边缘20px。我希望第一张图片的右边和第二张图片的左边之间有20px的距离，因为只有更大的边距才会使边距收缩。但是，当我在Google开发人员工具中对其进行检查时，它们之间的间隔为30px（10px + 20px）。它出什么问题了？还是我对利润下降的理解有误？

最佳答案

边距折叠仅适用于块级元素。
只有顶部和底部边距会折叠，而右侧和左侧则不会。
元素的下边距和下一个元素的上边距已折叠。

在这里很好地解释了：https://css-tricks.com/what-you-should-know-about-collapsing-margins/

提示：谷歌在发布问题之前就足够了！

关于html - 为什么我的利润率下降代码不起作用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37050709/