Question

当我提供top-margin到.galeria元素时，为什么我在top-margin元素中也得到相同的.sorial-grande？

http://sorialconstrucciones.com/trabajos

.sorial-grande {
    position: absolute;
    right: 0;
    left: 0;
    background: url("/drawing.svg");
    background-repeat: repeat-x;
    height: 337px;
    background-position: center center;
  }
  .galeria {
    padding: 40px;
    clear: both;
    /*margin-top: 350px;*/
    img {
      width: 207px;
      margin-right: 10px;
      margin-bottom: 10px;
    }
  }


<div class="sorial-grande"></div>
<section class="galeria">
  <img src="/images/00.jpg"></img>
  <img src="/images/02.jpg"></img>
</section>

Answer 1

将其从margin-top更改为padding-top

.galeria {
    padding-top: 350px;
}

Answer 2

我认为某个地方正在重复代码，因为监视文件.css，我看到你提到的更多属性。如果这是真的，我认为评论这两行，将解决你的问题（如果这是你想要的）。

main .sorial-grande {
   /* position: absolute; this line */
}

和

main #galeria { 
    /* padding: 222px 40px 40px; */
}

Answer 3

这通常被称为保证金崩溃。实际上，正如mdn所示，＆＃34;块的顶部和底部边距有时会合并（折叠）为单个边距，其大小是合并到其中的边距中的最大边距，这种行为称为边距折叠＆＃34;

有一些ways可以解决它。在您的情况下，最简单的方法是将padding-top:1px添加到<main>代码

保证金顶部影响另一个元素

3 个答案: