HTML 外边距折叠，以及消除的办法_html/css_WEB-ITnose
有如下的HTML
<body> <div class="page"> <div class="mains"> <div class="content"></div> </div> </div></body>
以及如下的css
html,body{ padding: 0px; margin: 0px; width: 100%; height: 100%; }html{ background: aliceblue; }body{ background:antiquewhite; }.page { width: 600px; height: 300px; background: mediumaquamarine;}.mains { width: 300px; height: 200px;background: yellow;}.content{ width: 200px; height: 100px;background:mistyrose;}在常规流中显示的效果如下（图1）
此时，为.content添加以下样式
.content{width: 200px; height: 100px;background:mistyrose; margin-top: 10px; }显示效果（图2）
这里可能会出乎很多人的意料，按我们正常的理解，.content外部有.mains的包围，那.content应该是顶部距离.mains 10px才是，可实际情况他们并没有分开，甚至最终的结果感觉是body顶部距离html顶部10px（至于这感觉对不对呢？也许不完全如此）.这就是“外边距折叠”
接下来我们再给.mains加上margin-top样式
.mains {width: 300px;height: 200px;background: yellow;margin-top: 10px;}其显示效果与“图2”一样，那么我们修改.mians的margin-top的值
.mains {width: 300px;height: 200px;background: yellow;margin-top: 20px;}显示效果如下（图3）
此时的效果并不是相距30px，而是取了两则中最大的值20px.
接着给.page加上“margin-top: 20px；”效果不变，给body加上也是一样的效果。但如果给html加上该样式
html{ background: aliceblue; margin-top: 20px; }显示效果（图4）
从以上结果可得知，在常规流中，html里面的元素（包括body）的外边距都是针对html元素的边缘来确定的。而html元素的外边距是针对浏览器顶部决定的。从其得知，html元素其实生成了BFC.
那么问题来了，如果这样，那设置的html的背景色真的是html元素的吗？（因为设置html的margin-top: 20px;后背景色用的仍是对html元素设置的样式值）会不会其实是浏览器的背景色？
对于“图2”和“图3”，其实我们绝大多数情况要的不是这样的效果，要的其实是针对父元素的margin-top. 对于这种上下级元素而言，他们的margin是针对最近的BFC块来定位的，所以，我们只要能让其父元素生产BFC就可以实现我们想要的效果。例如我对.mains添加以下的样式：
overflow: hidden;
那么我们想要的效果也就出来了，如下所示：
如果我们不在.mains上添加，而是在.page上添加，那结果将会如下所示
将.mains和.page同时加上overflow: hidden; 其结果如下：
这不就是我们想要达到的效果吗~~
以上是针对“父子关系”的元素外边距折叠以及解决的办法，至于兄弟元素的折叠问题就相对简单多了。当然解决的办法也是一样。
推荐该链接供大家学习：
http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html
根据w3c规范，两个margin是邻接的必须满足以下条件：
必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个BFC当中。
没有线盒，没有空隙（clearance，下面会讲到），没有padding和border将他们分隔开
-
都属于垂直方向上相邻的外边距，可以是下面任意一种情况
元素的margin-top与其第一个常规文档流的子元素的margin-top
元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top
height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom
高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立新的BFC的元素的margin-top和margin-bottom
以上的条件意味着下列的规则：
创建了新的BFC的元素（例如浮动元素或者'overflow'值为'visible'以外的元素）与它的子元素的外边距不会折叠
浮动元素不与任何元素的外边距产生折叠（包括其父元素和子元素）
绝对定位元素不与任何元素的外边距产生折叠
inline-block元素不与任何元素的外边距产生折叠
一个常规文档流元素的margin-bottom与它下一个常规文档流的兄弟元素的margin-top会产生折叠，除非它们之间存在间隙（clearance）。
一个常规文档流元素的margin-top 与其第一个常规文档流的子元素的margin-top产生折叠，条件为父元素不包含 padding 和 border ，子元素不包含 clearance。
一个 'height' 为 'auto' 并且 'min-height' 为 '0'的常规文档流元素的 margin-bottom 会与其最后一个常规文档流子元素的 margin-bottom 折叠，条件为父元素不包含 padding 和 border ，子元素的 margin-bottom 不与包含 clearance 的 margin-top 折叠。
一个不包含border-top、border-bottom、padding-top、padding-bottom的常规文档流元素，并且其 'height' 为 0 或 'auto'， 'min-height' 为 '0'，其里面也不包含行盒(line box)，其自身的 margin-top 和 margin-bottom 会折叠。
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?
Mar 04, 2025 pm 12:32 PM
The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,
How to efficiently add stroke effects to PNG images on web pages?
Mar 04, 2025 pm 02:39 PM
This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect
How do I use HTML5 form validation attributes to validate user input?
Mar 17, 2025 pm 12:27 PM
The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.
What is the purpose of the <datalist> element?
Mar 21, 2025 pm 12:33 PM
The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
What is the purpose of the <progress> element?
Mar 21, 2025 pm 12:34 PM
The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
What are the best practices for cross-browser compatibility in HTML5?
Mar 17, 2025 pm 12:20 PM
Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.
What is the purpose of the <meter> element?
Mar 21, 2025 pm 12:35 PM
The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
What is the purpose of the <iframe> tag? What are the security considerations when using it?
Mar 20, 2025 pm 06:05 PM
The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.
