Question

我在另一个div徽标中有一个div mainlogo 。现在，当我在顶部给它边距时，它会流到外部div之外。我想要的是，当我给它上边距时，它应该向下移动，而不是将其边缘移到父母之外。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

为什么会这样，我该如何解决？

Answer 1

棘手的保证金规格。 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标记，以避免意外的跨浏览器怪癖。

Answer 2

因为你正在使用泛化DIV原样。使用浮动属性，即 float：left ，

它会起作用

像这样，

#mainlogo {
  float:left;
  height: 80px;
  width: 350px;
  margin-top:20px;
}

Answer 3

试试这个...将headerdiv的position属性设置为position：absolute;

.headerdiv {
  width: 1020px;
  margin: 0 auto;
  height: inherit;
  position: absolute;
}

为什么这个保证金流出其母公司？

3 个答案: