我在另一个 div 中有一个 div mainlogo 作为 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>
为什么会发生,我该如何解决?
最佳答案
棘手的 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
标记以避免意外的跨浏览器怪癖。
关于html - 为什么这个 margin 会流出它的母公司?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38073135/