当我尝试使用负边距向上移动图像时，整个容器向上移动

Question

所以，这是html代码：

<div class="bottom_block">
   <a class="logo" href="#">
    <img src="img/logo_uniqa.jpg" height="90px" width="100px" alt="logo">
   </a>
</div>

这是css：

.bottom_block {
    background-color:  blue;
    height: 50px;
    width: 100%;

}
.logo {
    display:block;
    padding-bottom: 10px;

}
.logo img {
    display: block;
    margin:0 auto;
}

所以，我使用了margin-top：-10px，但它移动整个容器，而不仅仅是图像。

Answer 1

这是由margin-collapsing规则引起的。要修复它，您只需在元素上使用透明边框：

.logo img {
   border: 1px solid transparent;
   margin-top: -10px;
   display: block;
}

保证金崩溃是什么？

我已经链接到MDN的文档页面以查看边距折叠的情况。这是快速浏览：

现在，为什么添加边框会中止边距折叠规则？

这不是阻止利润率崩溃的唯一方法;还有其他方法，例如向元素添加填充。

为什么这会阻止保证金的崩溃？因为它（元素）与盒子布局分开。我的意思是说填充或边框不会将元素彼此物理分离，但边缘会在每个物理上分开。

好的，我们来讨论边框，填充或溢出技术如何防止边缘崩溃。为了清理你的东西，我制作了这张磁铁图片。您可能知道相反极磁铁的规则，如果一个移动另一个也会移动而不是相互拼接。

查看图片，了解如何防止边缘崩溃：

保证金崩溃的规则可能不完全是磁铁规则的相反极点。但是为了清理这一点，我希望这已经足够了。