CSS的margin塌陷（collapse）

时间 2019-11-11

标签 css margin collapse 栏目 CSS 繁體版

原文原文链接

<!DOCTYPEHTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN">

 <html>

 <head>

  <title></title>

 <metaname=""content="">

 <style>

*{

    margin:0px;

    padding:0px;

 #no1{

   background:#808000;

    width:300px;

   height:300px;

   margin:100px 0 0 100px;

 #no2{

   background:#c0c0c0;

   width:150px;

  height:150px;

   margin-left:20px;

   margin-top:30px;

 </style>

 </head>

 <body>

 <div id="no1">

 <div id="no2">Span2</div>

 </div>

</body>

</html>

若是您认为应该是这样的话：html

那就错了。结果是这样的：浏览器

由于CSS中存在一个margin collapse，即边界塌陷或者说边界重叠。对于app

上下两个并列的div块而言，上面div的margin-bottom和下面div的margin-布局

top会塌陷，也就是会取上下二者margin里最大值做为显示值，因此从这个spa

意义上说：CSS及浏览器的设计者们但愿咱们在布局时，若是遇到上下两个设计

并排内容块的安排，最好只设置其中每一个块上或下margin的一处便可。w3scode

chool也规定：当两个垂直外边距相遇时，它们将造成一个外边距。合并后htm

的外边距的高度等于两个发生合并的外边距的高度中的较大者。ip

但对于父块DIV内含子块DIV的状况，就会按另外一条CSS惯例来解释了，那get

就是：对于有块级子元素的元素计算高度的方式,若是元素没有垂直边框和填

充,那其高度就是其子元素顶部和底部边框边缘之间的距离。因此对于代码：

   1: <div class="father"></div>

father这个div的高度为0，由于里面没有可以撑开div的内容。若是变为：

   1: <div class="father">I am here.</div>

则高度就是文字的高度，由于此时文字在撑着这个DIV。

话说回来，一个DIV和它的子DIV特别重视垂直边框或填充，也就好像是，

一口锅，里面放个盆，能不能扣住里面的盆，主要看锅盖了，垂直边框或填

充就是这个“锅盖”。因而解决的方式至少有如下三种：

一、须要给父div设置边框，固然能够设置边框为透明：

   1: border:1px solid transparent

   2: 或

   3: border-top:1px solid transparent

二、为父DIV添加padding，或者至少添加padding-top;

   1: padding:1px

   2: 或

   3: padding-top:1px;   /*必须大于0*/

三、为父DIV添加overflow:hidden

   1: over-flow:hidden;