搜索
首页web前端html教程CSS2系列:外边距合并问题(margincollapse)_html/css_WEB-ITnose

外边距合并

当两个垂直方向外边距相遇,它们将形成一个折叠外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
为了好认识,我们称内部div为"盒子",包含这个内部div的外部div为"包含体"

解释

  • 怎么相遇:
  • 相邻的两个盒子(可能是兄弟关系也可能是包含关系)这两个元素margin之间不能夹杂着边框啊,补白啊什么的就算margin相遇,这点很重要
  • 哪个方向
  • 一定为垂直方向,水平方向没有
  • 形成一个折叠外边距过程
    1. 盒子margintop和包含体margintop取出最终折叠外边距值。下面为取这个值的情况 150 50=150 150 -50=100 -150 -50 =-150 -150 50 =-100
    2. 两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。可以在下面例子2中,改变一下
    3. 两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。
    4. 两个外边距一正一负时,折叠结果是两者的相加的和。
    5. 包含关系时,盒子不显示margin-top(相当没有margin-top),包含体显示margin-top这个最终值。
    6. 兄弟关系时,两兄弟之间的margin共用这个最终值。
  • 极限情况一个元素

  • 当一个块元素,没有补白和填充,上外边距与下外边距就碰到了一起,它们也会发生合并。
  • 例子1包含关系,不设置外层div的内边距(补白)和边框的前提!

    <meta charset="utf-8"><style type="text/css">            * {margin:0;padding:0;border:0;}            #outer {width:200px;height:200px;background-color:red;margin-top:-20px;}            #inner {width:50px;height:50px;background-color:blue;margin-top:50px;}</style>

    <div id="outer">  <div id="inner">  </div></div><!--不设置 div 的内边距和边框,那么内部 div 的上外边距将与外部 div 的上外边距合并(叠加),内部div箱单更木有margin-top。外部用这个最大值。-->

    例子2兄弟关系

    * {margin:0; padding:0;border:0;}#d1 {width:100px;height:100px;margin-top:50px;margin-bottom:50px;background-color:red;}/*改变margin-bottom:-50px;试一试*/#d2 {width:100px;height:100px;margin-top:10px;background-color:blue;}
    <div id="d1"></div><div id="d2"></div><!--两个 div 之间的外边距是 50px,并不是 60px(50px + 10px)。-->

    例子3本身合并``它有外边距,但是没有边框或填充。在这种情况下,上外边距与下外边距就碰到了一起,它们会发生合并:

    * {margin:0; padding:0;border:0;}#d1{border: 1px solid red;width: 200px;}#d2 {height:0px;min-height:0px;margin-top:50px;margin-bottom:150px;}/*border: 1px solid red;试一试将这个盒子边框加上,是不是还能合并。答案不能!*/
    <div id="d1">    <div id="d2"></div></div>


    从图中可以看到这个红色边框包裹的高度是150px,不是200px。包含体本身木有高度,随着盒子的最后得到的折叠margin自动撑开。

    例子3调试注意

    但是在浏览器调试的时候,监视盒子的时候,并不是给我们显示折叠margin值。而是显示这个盒子的设定值。这点不要影响,最终的折叠margin值的肯定。

    例子3Question!!求答案,想了一下午。

    减轻上面的影响请试一试一下代码

    * {margin:0; padding:0;border:0;}#d2 {height:0px;min-height:0px;margin-top:50px;margin-bottom:150px;}<div id="d2"></div>

    从上面注意我们知道:调试的时候选中这个元素,显示200px是正常的,但是这个元素距离浏览器上面100px,这个我真不能理解。

    不能产生折叠边距的情况

  • BFC元素不会与兄弟,包含元素产生折叠边距。那么什么是BFC呢?敬请关注我的下一篇文章。
  • 声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    超越HTML:网络开发的基本技术超越HTML:网络开发的基本技术Apr 26, 2025 am 12:04 AM

    要构建一个功能强大且用户体验良好的网站,仅靠HTML是不够的,还需要以下技术:JavaScript赋予网页动态和交互性,通过操作DOM实现实时变化。CSS负责网页的样式和布局,提升美观度和用户体验。现代框架和库如React、Vue.js和Angular,提高开发效率和代码组织结构。

    HTML中的布尔属性是什么?举一些例子。HTML中的布尔属性是什么?举一些例子。Apr 25, 2025 am 12:01 AM

    布尔属性是HTML中的特殊属性,不需要值即可激活。1.布尔属性通过存在与否控制元素行为,如disabled禁用输入框。2.它们的工作原理是浏览器解析时根据属性的存在改变元素行为。3.基本用法是直接添加属性,高级用法可通过JavaScript动态控制。4.常见错误是误以为需要设置值,正确写法应简洁。5.最佳实践是保持代码简洁,合理使用布尔属性以优化网页性能和用户体验。

    如何验证您的HTML代码?如何验证您的HTML代码?Apr 24, 2025 am 12:04 AM

    HTML代码可以通过在线验证器、集成工具和自动化流程来确保其清洁度。1)使用W3CMarkupValidationService在线验证HTML代码。2)在VisualStudioCode中安装并配置HTMLHint扩展进行实时验证。3)利用HTMLTidy在构建流程中自动验证和清理HTML文件。

    HTML与CSS和JavaScript:比较Web技术HTML与CSS和JavaScript:比较Web技术Apr 23, 2025 am 12:05 AM

    HTML、CSS和JavaScript是构建现代网页的核心技术:1.HTML定义网页结构,2.CSS负责网页外观,3.JavaScript提供网页动态和交互性,它们共同作用,打造出用户体验良好的网站。

    HTML作为标记语言:其功能和目的HTML作为标记语言:其功能和目的Apr 22, 2025 am 12:02 AM

    HTML的功能是定义网页的结构和内容,其目的在于提供一种标准化的方式来展示信息。1)HTML通过标签和属性组织网页的各个部分,如标题和段落。2)它支持内容与表现分离,提升维护效率。3)HTML具有可扩展性,允许自定义标签增强SEO。

    HTML,CSS和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:结构,CSS:样式,JavaScript:行为HTML:结构,CSS:样式,JavaScript:行为Apr 18, 2025 am 12:09 AM

    HTML、CSS和JavaScript在Web开发中的作用分别是:1.HTML定义网页结构,2.CSS控制网页样式,3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

    HTML的未来:网络设计的发展和趋势HTML的未来:网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

    HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

    See all articles

    热AI工具

    Undresser.AI Undress

    Undresser.AI Undress

    人工智能驱动的应用程序,用于创建逼真的裸体照片

    AI Clothes Remover

    AI Clothes Remover

    用于从照片中去除衣服的在线人工智能工具。

    Undress AI Tool

    Undress AI Tool

    免费脱衣服图片

    Clothoff.io

    Clothoff.io

    AI脱衣机

    Video Face Swap

    Video Face Swap

    使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

    热工具

    EditPlus 中文破解版

    EditPlus 中文破解版

    体积小,语法高亮,不支持代码提示功能

    螳螂BT

    螳螂BT

    Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

    适用于 Eclipse 的 SAP NetWeaver 服务器适配器

    适用于 Eclipse 的 SAP NetWeaver 服务器适配器

    将Eclipse与SAP NetWeaver应用服务器集成。

    mPDF

    mPDF

    mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

    MinGW - 适用于 Windows 的极简 GNU

    MinGW - 适用于 Windows 的极简 GNU

    这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。