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 会折叠。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
了解HTML，CSS和JavaScript：初學者指南
Apr 12, 2025 am 12:02 AM
WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。
HTML：結構，CSS：樣式，JavaScript：行為
Apr 18, 2025 am 12:09 AM
HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。
HTML，CSS和JavaScript的未來：網絡開發趨勢
Apr 19, 2025 am 12:02 AM
HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。
HTML的未來：網絡設計的發展和趨勢
Apr 17, 2025 am 12:12 AM
HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。
HTML與CSS vs. JavaScript：比較概述
Apr 16, 2025 am 12:04 AM
HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。
HTML：建立網頁的結構
Apr 14, 2025 am 12:14 AM
HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。
HTML與CSS和JavaScript：比較Web技術
Apr 23, 2025 am 12:05 AM
HTML、CSS和JavaScript是構建現代網頁的核心技術：1.HTML定義網頁結構，2.CSS負責網頁外觀，3.JavaScript提供網頁動態和交互性，它們共同作用，打造出用戶體驗良好的網站。
HTML：是編程語言還是其他？
Apr 15, 2025 am 12:13 AM
HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。
