html - 为什么这个 margin 会流出它的母公司？

Question

我在另一个 div 中有一个 div ma​​inlogo 作为 Logo 。现在，当我在顶部给它留边距时，它会流到外部 div 之外。我想要的是，当我给它 margin-top 时，它应该向下移动，而不是将其 margin 移到父级之外。

.header {
  width: inherit;
  height: 100px;
  background-color: #0080FF;
  box-shadow: 0.5px 0.5px 0.5px 0.5px grey;
}
.headerdiv img {
  width: 80px;
}
.headerdiv {
  width: 1020px;
  margin: 0 auto;
  height: inherit;
  position: relative;
}
#mainlogo {
  height: 80px;
  width: 350px;
  margin-top: 10px;
}

<div class="header">
  <div class="headerdiv">
    <a href="onlinequiz login.php">
      <div id="mainlogo">
        <img src="Images/logo.png"></img>
      </div>
    </a>
  </div>
</div>

为什么会发生，我该如何解决？

Answer 1

棘手的 margin 规范。 This page对您遇到的行为有很好的解释。如果您不想将 #mainlogo 空格更改为 padding，您可以通过提供 overflow: hidden 属性来解决边距折叠问题到您的 .header。

.header {
  width: inherit;
  height: 100px;
  background-color: #0080FF;
  box-shadow: 0.5px 0.5px 0.5px 0.5px grey;
  overflow: hidden;
}
.headerdiv img {
  width: 80px;
}
.headerdiv {
  width: 1020px;
  margin: 0 auto;
  height: inherit;
  position: relative;
}
#mainlogo {
  height: 80px;
  width: 350px;
  margin-top: 10px;
}

<div class="header">
  <div class="headerdiv">
    <a href="onlinequiz login.php">
      <div id="mainlogo">
        <img src="Images/logo.png"></img>
      </div>
    </a>
  </div>
</div>

此外，您可以考虑将 #mainlogo div 更改为 span 并自动关闭您的 img标记以避免意外的跨浏览器怪癖。