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

小编典典

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

css

因此，这是html代码：

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

And here is 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，但它移动了整个容器，而不仅仅是图像。

阅读 290

2020-05-16

共1个答案

小编典典

这是由于保证金合拢规则。要解决此问题，您可以简单地在元素上使用透明边框：

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

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

这不是防止保证金崩溃的唯一方法。还有其他方法，例如向元素添加填充。

为什么这可以防止利润减少？因为它（元素）与盒子布局是分开的。我的意思是说，填充或边框不会将元素物理上分开，而是将边缘物理上分开。

好的，让我们讨论一下边框，填充或溢出技术如何防止边距崩溃。为了给您整理东西，我拍了这张磁铁的照片。您可能知道相反极磁铁的规则，如果一个磁铁移动，另一个也会移动，而不是彼此缝合。

2020-05-16