CSS的margin塌陷（collapse）

素颜马尾好姑娘i 2022-06-15 22:49 232阅读 0赞

<!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>

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

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

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

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

top会塌陷，也就是会取上下两者margin里最大值作为显示值，所以从这个

意义上说：**CSS及浏览器的设计者们希望我们在布局时，如果遇到上下两个**

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

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

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

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

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

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

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

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

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

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

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

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

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

**1、需要给父div设置边框，当然可以设置边框为透明：**

1: border:1px solid transparent

2: 或

3: border-top:1px solid transparent

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

1: padding:1px

2: 或

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

** 3、为父DIV添加overflow:hidden**

1: over-flow:hidden;

发表评论取消回复

表情：

评论列表（有 0 条评论，232人围观）

还没有评论，来说两句吧...

相关阅读

相关 margin塌陷

文章目录 1. 什么是margin塌陷 2. 问题场景 3. 怎么破 1. 什么是margin塌陷

曾经终败给现在/ 2022年08月31日 04:53/ 0 赞/ 180 阅读

相关理解 margin 塌陷和 margin 合并及其解决方案

点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群前言小问题总是被人视而不见，等遇到的时候又突然想不起来，所以我们需要经常总结，这可以帮助我们更好

红太狼/ 2022年08月31日 00:55/ 0 赞/ 191 阅读

相关【CSS】1035- 再看 margin 塌陷和合并问题

![3ec29c9cd1edc2e0c936a88a8c3afa26.png][] 前言小问题总是被人视而不见，等遇到的时候又突然想不起来，所以我们需要经常总结，这可

心已赠人/ 2022年08月29日 06:19/ 0 赞/ 180 阅读

相关 CSS中，margin的折叠（collapsing ）问题

From:http://www.sitepoint.com/web-foundations/collapsing-margins/ Let’s explore exac

男娘i/ 2022年08月20日 06:09/ 0 赞/ 170 阅读

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

来源：[http://www.ido321.com/387.html][http_www.ido321.com_387.html] <!DOCTYPEHTML PUB

雨点打透心脏的1/2处/ 2022年08月11日 09:59/ 0 赞/ 172 阅读

相关 Collapsing margins(外边距合并)

开篇 > 块元素的上边距或下边距有时会合并为一个margin，这种情况称之为外边距的合并，即collapsing margins. 一个常见的css样式的bug

╰半橙微兮°/ 2022年08月02日 15:56/ 0 赞/ 221 阅读

相关 CSS的margin塌陷（collapse）

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

素颜马尾好姑娘i/ 2022年06月15日 22:49/ 0 赞/ 233 阅读

相关解决margin塌陷问题

magin塌陷：在普通文档流中，当一个元素被包含在另一个元素中时，子元素设置margin-top无效。源代码： <!DOCTYPE html> <htm

短命女/ 2022年06月05日 22:41/ 0 赞/ 268 阅读

相关【CSS】margin塌陷与合并问题及BFC初探

1.margin塌陷问题 margin塌陷指的是嵌套父子块级元素垂直方向（次方向）的margin会结合到一起，并取最大的值，子元素的margin会往父元素顶部上方方向塌陷。（

ゝ一纸荒年。/ 2022年04月24日 14:18/ 0 赞/ 277 阅读

相关 margin塌陷和margin合并问题及解决方案

一，margin塌陷父子嵌套元素在垂直方向的margin,父子元素是结合在一起的,他们两个的margin会取其中最大的值. 正常情况下,父级元素应该相对浏览器进行定

短命女/ 2021年07月25日 21:48/ 0 赞/ 424 阅读