CSS的margin塌陷（collapse）

素颜马尾好姑娘i 2022-06-15 22:49 258阅读 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 条评论，258人围观）

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

相关阅读

相关 CSS margin 重叠(margin collapse)

首先有两个地方是我自己以前也没有注意的非替换元素的内联元素(,等),设置上下margin没有用.但是设置左右margin是有效果的.而替换元素(等),设置上下左右四个ma...

青旅半醒/ 2024年05月24日 04:32/ 0 赞/ 85 阅读

相关 CSS--解决margin塌陷(margin-top失效)--实例

原文网址：[CSS--解决margin塌陷(margin-top失效)--实例\_IT利刃出鞘的博客-CSDN博客][CSS--_margin_margin-top_--_IT

快来打我*/ 2023年10月01日 08:12/ 0 赞/ 24 阅读

相关 css Margin塌陷问题（margin属性撑不开盒子）

问题在两个盒子嵌套时，内部的盒子设置的margin-X会加到外边的盒子上，导致内部的盒子margin-X设置失败。。。解决方案 1、外部盒子设置一个边框 2

小灰灰/ 2023年06月05日 12:48/ 0 赞/ 26 阅读

相关 margin塌陷

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

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

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

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

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

相关问题与对策：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 赞/ 194 阅读

相关 Collapsing margins(外边距合并)

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

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

相关 CSS的margin塌陷（collapse）

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

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

相关解决margin塌陷问题

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

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

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

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

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