CSS的margin塌陷（collapse）

对于以下简单代码：

点击(此处)折叠或打开

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <html>
  3. <head>
  4. <title></title>
  5. <meta name="" content="">
  6. <style>
  7. *{
  8. margin:0px;
  9. padding:0px;
  10. }
  11. #no1{
  12. background:#808000;
  13. width:300px;
  14. height:300px;
  15. margin:100px 0 0 100px;
  16. }
  17. #no2{
  18. background:#c0c0c0;
  19. width:150px;
  20. height:150px;
  21. margin-left:20px;
  22. margin-top:30px;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <div id="no1">
  28. <div id="no2">Span2
  29. </body>
  30. </html>

如果您认为应该是这样的话：

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

因为CSS中存在一个margin collapse，即边界塌陷或者说边界重叠。对于上下两个并列的div块而言，上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值，所以从这个意义上说：CSS及浏览器的设计者们希望我们在布局时，如果遇到上下两个并排内容块的安排，最好只设置其中每个块上或下margin的一处即可。

但对于父块DIV内含子块DIV的情况，就会按另一条CSS惯例来解释了，那就是：对于有块级子元素的元素计算高度的方式,如果元素没有垂直边框和填充,那其高度就是其子元素顶部和底部边框边缘之间的距离。所以对于代码：

点击(此处)折叠或打开

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

father这个div的高度为0，因为里面没有能够撑开div的内容。如果变为：

点击(此处)折叠或打开

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

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

话说回来，一个DIV和它的子DIV特别重视垂直边框或填充，也就好像是，一口锅，里面放个盆，能不能扣住里面的盆，主要看锅盖了，垂直边框或填充就是这个“锅盖”。于是解决的方式至少有以下两种：

 结论：

    解决父子DIV中顶部margin cllapse的问题，需要给父div设置：

    1、边框，当然可以设置边框为透明;

点击(此处)折叠或打开

  1. border:1px solid transparent
  2. 或
  3. border-top:1px solid transparent

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

    此外，还可以通过over-flow来解决，给父DIV写入：

点击(此处)折叠或打开

  1. over-flow:hidden;

希望对大家有所帮助。

时间： 2024-10-25 06:54:14

CSS的margin塌陷（collapse）的相关文章

问题与对策：CSS的margin塌陷（collapse）

1: <!DOCTYPEHTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN"> 2: <html> 3: <head> 4: <title></title> 5: <metaname=""content=""> 6: <style> 7: *{ 8: margin:0px; 9: padding:0px; 10: }

CSS的margin塌陷（collapse） 问题与对策

对于以下简单代码: 如果您认为应该是这样的话: 那就错了.结果是这样的: 因为CSS中存在一个margin collapse,即边界塌陷或者说边界重叠.对于上下两个并列的div块而言,上面div的margin-bottom和下面div的margin-top会塌陷,也就是会取上下两者margin里最大值作为显示值,所以从这个意义上说:CSS及浏览器的设计者们希望我们在布局时,如果遇到上下两个并排内容块的安排,最好只设置其中每个块上或下margin的一处即可. 但对于父块DIV内含子块DIV的情况,

CSS的margin塌陷

一.两个div并列,上面div的margin-bottom和下面div的margin-top会塌陷,也就说会取上面div的margin-bottom和下面div的margin-top的最大值作为显示值.解决方法:两个div并列,只设置其中一个块上或下margin的一处即可. 二.父块DIV内含子块DIV,且父div没有border-top.padding-top或overflow:hidden这些css属性,这时子Div的margin-top设置没有效果.解决方法: 给父div设置1.borde

margin塌陷(collapse)

1.当两个对象为上下关系时,而且都具备margin属性时,上面的margin-bottom与下面的margin-top会发生塌陷 当margin-bottom和margin都为正数时,结果为两者之间的最大值 <div id="a"></div> <div id="b"></div> #a{ background:red; width:150px; height:150px; margin-bottom:50px; }

11-[CSS]-margin塌陷，

1.margin塌陷 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin的塌陷</title> <style type="text/css"> *{ padding: 0; margin: 0; } .box1{ width: 300px; height: 200

margin塌陷与合并问题

本文转自: https://blog.csdn.net/Sunshineanl/article/details/70767277 margin塌陷问题和合并问题都只对垂直方向有效 margin塌陷问题 这个问题是一个经典的浏览器内核问题.具体表现是当两个元素嵌套到一起时,外层盒模型的margin-top取两个元素中margin-top较大的值. 因为在正常的情况下内层元素是相对于外层元素进行移动,但是这时内层元素却相对于整个文档进行移动,好像外层元素没有“棚顶”一样,因此叫margin塌陷问题.

触发bfc解决父子元素嵌套垂直方向margin塌陷问题

首先看一下问题案例 .wrapper{ width: 100px; height: 100px; background-color: aqua; margin-top: 100px; margin-left: 100px; } .inner{ width: 50px; height: 50px; margin-top: 100px; margin-left: 50px; background-color:black; } <div class="wrapper"> <

6.margin塌陷问题

当时说到了盒模型,盒模型包含着margin,为什么要在这里说margin呢?因为元素和元素在垂直方向上margin里面有坑. 我们来看一个例子: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>margin塌陷</title> <style type="text/css"> *

解决margin塌陷和margin合并

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>嘿嘿嘿</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no,