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

Posted 2023-03-06

【中文标题】当我尝试使用负边距向上移动图像时，整个容器向上移动

【英文标题】：When I try to shift the image upwards using negative margin the whole container is moved upwards

【发布时间】：2016-05-22 02:15:27

【问题描述】：

所以，这里是html代码：

<div class="bottom_block">
   <a class="logo" href="#">
    <img src="img/logo_uniqa.jpg"   >
   </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 但它会移动整个容器，而不仅仅是图像。

【问题讨论】：

为什么给容器高度（.bottom_block）高度为50px，图片高度为90px？

您正在添加高度：50px；到.bottom-block 并且您的图像高度被硬编码为90px；

图像垂直居中还是水平居中？ If (b): text-align: center 在 a.logo 上

【参考方案1】：

这是由于margin-collapsing 规则。要修复它，您可以简单地在元素上使用透明边框：

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

---

什么是边距折叠？

我已经链接到 MDN 的文档页面，了解什么是边距折叠。这是快速浏览：

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

这不是防止边距折叠的唯一方法；还有其他方法，例如向元素添加填充。

为什么这可以防止边距折叠？因为它（元素）与盒子布局是分开的。我的意思是说填充或边框不会将元素物理地彼此分开，但边距将每个元素物理地分开。

好的，让我们讨论一下边框、填充或溢出技术如何防止折叠边距。为了向你澄清事情，我制作了这张磁铁的照片。您可能知道异极磁铁的规则，如果一个移动了另一个也会移动而不是相互拼接。

查看图片了解如何防止边距塌陷：

边距塌陷的规则可能与磁铁的反极规则不完全相同。但我希望能把事情弄清楚就够了。

【讨论】：

我没有完全明白，为什么，但是添加边框有帮助！谢谢