当我尝试使用负边距向上移动图像时，整个容器向上移动
所以，这里是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，但它移动了整个容器，而不是图像。
这是由于边缘折叠规则。 为了解决这个问题，你可以简单地在元素上使用透明的边框：
.logo img {
border: 1px solid transparent;
margin-top: -10px;
display: block;
}
什么是保证金崩溃？
我已经链接到MDN的文档页面，以了解边缘折叠的情况。 快速查看：
现在，为什么添加边界会中止边距折叠规则？
这不是防止边缘折叠的唯一途径; 还有其他方法，例如为元素添加填充。
为什么这会防止保证金的崩溃？ 因为它（元素）与箱子布局分开。 我的意思是说，填充或边框不会将元素彼此物理分离，但边距将物理分隔。
好吧，让我们讨论边界，填充或溢出技术如何防止塌陷边缘。 为了澄清事情给你，我做了这张磁铁的照片。 你可能知道对极磁铁的规则，如果一个被移动，另一个也会移位而不是相互拼接。
看看图片，了解如何防止边缘崩溃：
边缘崩溃的规则可能不完全像磁铁规则的相反极点。 但是为了清除这些事情，我希望这已经足够了。
链接地址: http://www.djcxy.com/p/87767.html上一篇: When I try to shift the image upwards using negative margin the whole container is moved upwards