Html 为什么我的利润率会崩溃,尽管我的每件事都有边界?
代码如下:Html 为什么我的利润率会崩溃,尽管我的每件事都有边界?,html,css,border,margin,collapse,Html,Css,Border,Margin,Collapse,代码如下: <html> <head> <title></title> <style type="text/css"> * {border: 0px; padding: 0px;} #greenbox { margin: 20px; border: 5px solid green;
<html>
<head>
<title></title>
<style type="text/css">
* {border: 0px; padding: 0px;}
#greenbox
{
margin: 20px;
border: 5px solid green;
}
#redbox
{
margin: 20px;
border: 5px solid red;
}
#bluebox
{
border: 5px solid blue;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-top: 20px; /*COLLAPSES - why??*/
}
</style>
</head>
<body>
<div id="greenbox">
<div id="redbox">
red box
</div>
<div id="bluebox">
bluebox
</div>
</div>
</body>
</html>
*{边框:0px;填充:0px;}
#绿箱
{
利润率:20px;
边框:5px纯绿色;
}
#红盒
{
利润率:20px;
边框:5px纯红;
}
#蓝盒子
{
边框:5px纯蓝色;
左边距:20px;
右边距:20px;
边缘底部:20px;
利润率顶部:20px;/*崩溃-为什么*/
}
红盒子
蓝盒子
基本上,它是一个绿色的盒子,里面有一个红色的盒子和一个蓝色的盒子
为什么红色框和蓝色框之间的垂直空间不是40px?
我知道红色框的底边和蓝色框的上边距已经“折叠”,但我的理解是,如果有边框或填充,则边距不会折叠(我尝试了这两种方法,但结果仍然相同。边距不会通过边框折叠。它们会通过彼此折叠 请参见此示例:
<style>
body { background: black; }
.red { background: red; }
.blue { background: blue; }
.border { border: solid white 1px; }
div { margin: 20px; min-height: 30px; width: 50% }
</style>
<div class="red">
<div class="blue">
</div>
</div>
<div class="red border">
<div class="blue border">
</div>
</div>
正文{背景:黑色;}
.red{背景:red;}
.blue{背景:蓝色;}
.border{border:纯白1px;}
div{边距:20px;最小高度:30px;宽度:50%}
当边界存在时,蓝色div顶部的边距将蓝色div顶部推离红色div顶部,使其位于内部。当边界不存在时,边距穿过边缘并塌陷到红色div周围的边距中
您的两个页边距相互接触,没有边框,因此它们会折叠。页边距不会通过边框折叠,而是通过彼此折叠 请参见此示例:
<style>
body { background: black; }
.red { background: red; }
.blue { background: blue; }
.border { border: solid white 1px; }
div { margin: 20px; min-height: 30px; width: 50% }
</style>
<div class="red">
<div class="blue">
</div>
</div>
<div class="red border">
<div class="blue border">
</div>
</div>
正文{背景:黑色;}
.red{背景:red;}
.blue{背景:蓝色;}
.border{border:纯白1px;}
div{边距:20px;最小高度:30px;宽度:50%}
当边界存在时,蓝色div顶部的边距将蓝色div顶部推离红色div顶部,使其位于内部。当边界不存在时,边距穿过边缘并塌陷到红色div周围的边距中
您的两个页边距相互接触,没有边框,因此它们会折叠。在框模型中,页边距位于边框外部,因此边框与折叠的页边距无关 您可以在此处阅读有关长方体模型的内容:
您可以在此处阅读折叠页边距的内容:在框模型中,页边距位于边框外部,因此边框与折叠的页边距无关 您可以在此处阅读有关长方体模型的内容:
您可以在此处阅读有关折叠页边距的内容:您是否在任何特定浏览器中进行测试?您是否真的没有doctype?您从何处了解到,如果您有边框,页边距不会折叠?这仅在某些情况下才是如此。您是否在任何特定浏览器中进行测试?您是否真的没有doctype?您在何处进行过测试r理解如果你有一个边界,那么边距不会塌陷吗?这只是在某些情况下。我理解。所以边距总是互相塌陷,除非它们之间有边界或填充,或者两者都有。我理解。所以边距总是互相塌陷,除非有边界或填充在它们之间填充,或者两者都填充。