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

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

这是由于保证金折叠规则.要修复它,您只需在元素上使用透明边框:

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

保证金崩溃是什么？

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

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

这不是防止边缘崩溃的唯一方法; 还有其他方法,例如向元素添加填充.

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

好的,我们来讨论边界,填充或溢出技术如何防止崩溃边缘.为了清理你的东西,我制作了这张磁铁图片.您可能知道相对极磁铁的规则,如果一个移位另一个也将移位而不是彼此拼接.

查看图片以了解如何防止边缘崩溃:

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