删除边框时边距将移到div外 [英] Margin goes outside div when border is removed
问题描述
根据我的网站上的边界和边缘的实际问题，我做了这个测试示例，我认为行为有点奇怪：
Derived from an actual problem with borders and margin on my site I have made this test example which I think acts a little strange:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:black;
}
.outer {
width:100px;height:100px;
}
.inner {
margin-top:40px;
height:20px;
border:1px solid red;
}
#outer-1 {
background-color:blue;
border-top:10px solid yellow;
}
#outer-2 {
background-color:green;
border-top:none;
}
#sep {
background-color:white;
}
</style>
</head>
<body>
<div id="outer-1" class="outer">
<div class="inner">
CONTENT
</div>
</div>
<div id="sep">TEST</div>
<div id="outer-2" class="outer">
<div class="inner">
CONTENT
</div>
</div>
</body>
</html>
为什么当删除border-top时，.inner的顶部边距移动in＃outer-2？我会认为红色边界会停留在蓝色和绿色区域的相对同一地点？但它不会。
Why does the top margin on ".inner" move "outside" when the border-top is removed in #outer-2? I would have thought the red border would have stayed inside the blue and green areas at relatively the same spot? but it doesn't.
为什么？
推荐答案
因为边距是邪恶的（并且往往会崩溃 - > 这是一个错误？ P元素的边距超出containig div ）。在你的case你可以简单地添加 overflow：hidden; 到 .outer
Because margins are evil (and tend to collapse -> is it a bug? margins of P element go outside the containig div). In your case you can simply add overflow:hidden; to .outer
这篇关于删除边框时边距将移到div外的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
