CSS-Learning | 外边距折叠机制与解决方案

最新推荐文章于 2024-03-09 21:07:46 发布
最新推荐文章于 2024-03-09 21:07:46 发布
阅读量309 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： CSS学习 文章标签： CSS 外边距折叠
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_35536883/article/details/89299681
这篇博客探讨了CSS中的外边距折叠现象，解释了何时会出现外边距折叠，并提供了防止外边距折叠的方法，如使用浮动元素、创建BFC、绝对定位以及设置inline-block元素。

外边距折叠

什么是外边距折叠？

简单来说，就是垂直方向上的两个外边距相遇时，会折叠成一个外边距。折叠后外边距的高度等于两者中较大的那一个高度。


可能出现外边距折叠的情况

  1. 当两个元素垂直堆叠时，上方元素的下外边距会与下方元素的上外边距相折叠。

折叠前、后

  1. 当一个元素嵌套着另一个元素的情况下，假设没有内边距或边框来分隔外边距，它们的上、下外边距也会折叠。

折叠前、后

  1. 甚至同一个元素的外边距都能折叠，假设有一个空元素，只有外边距而没有边框或内边距。此时，上外边距与下外边距接触，结果也会折叠。

折叠前、后


外边距折叠只发生在文档常规流中块级盒子的垂直方向上。行内盒子、浮动盒子或绝对定位盒子的外边距不会折叠。


如果我们不希望外边距折叠，该怎么做呢？

  1. 浮动元素不会与任何元素发生叠加，也包括它的子元素
  2. 创建了BFC的元素不会和它的子元素发生外边距叠加
  3. 绝对定位元素和其他任何元素之间不发生外边距叠加，也包括它的子元素
  4. inline-block元素和其他任何元素之间不发生外边距叠加，也包括它的子元素
  5. 普通流中的块级元素的margin-bottom永远和它相邻的下一个块级元素的margin-top叠加，除非相邻的兄弟元素clear
[Spark版本更新]--2.3.0发行说明
欢迎来到我的博客，一起探索代码里的世界！
03-03 1万+
自从2017年12月1日发布spark-2.2.1以来，已有3个月时间。2018年2月28日，spark官方发布了一个大版本Spark-2.3.0，解决了1399个大大小小的问题。一、DataBricks做了相关说明今天，我们很高兴地宣布Databricks上的Apache Spark 2.3.0作为其Databricks Runtime 4.0的一部分。我们要感谢Apache Spark社区为S...
CSS 外边距折叠如何解决
艾斯比
06-16 222
子元素和父元素视觉贴着时, 设置子元素 margin-top, 那么实际效果是父元素级的 margin-top, 而子元素和父元素仍然贴在一起 解决: 设置父元素 before 伪类, display: table; content: ''; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <sty
关于CSS的外边距折叠问题
bzd123a的博客
03-18 217
<style> .box1{ width: 200px; height: 200px; background-color: aqua; } .box2{ margin-top: 100px; width: 200px; height: 200px; background-colo.
CSS中的外边距折叠问题及其4种解决方法总结（完整版）
surymy
12-30 3426
外边距折叠一、概念二、兄弟元素三、父子元素 一、概念 一般是指垂直方向相邻的外边距会发生重叠现象，大多发生在兄弟元素和父子元素之间。 二、兄弟元素 box2是box1的兄弟元素 当两者都是正值时：取二者之间的最大值 <style> .box1{ width: 200px; height: 200px; background-color: tomato; margin-bott
CSS--外边距折叠现象及解决方案
weixin_63590089的博客
05-25 1885
CSS外边距折叠问题
css中外边距折叠原理及解决办法
冰雪为融的博客
03-28 3700
原文章链接点击打开链接晚上没事的时候看看今天白天遗留的问题，果然看的次数再多也不如动动金手，之前也看了很多遍关于外边距折叠的文章，但都没有真正的理解，今天边看边动手，终于理解了，嗯，原作者的文章写得很不错，自己再写估计也是一样只是方式不同，所以就直接转载喽，喜欢的并且英语也不错的可以看原作者的，里面还有英文解释呢在css中两个或多个盒子（可能是兄弟元素也可能是是父子关系）的相邻边界（期间没有任何非...
考试成绩管理系统的15个关键问题与解决方案：从设计到优化的全面解析
[考试成绩管理系统的15个关键问题与解决方案：从设计到优化的全面解析](https://octopusbi.com/wp-content/uploads/2021/04/What-is-learning-analytics-Header-Image-915x514.png) # 摘要 本文旨在全面分析和设计...
颜色恒常性CVPR2020 Multi-Domain Learning for Accurate and Few-Shot Color Constancy阅读笔记
WHU-Even的博客
02-09 3102
全文翻译 摘要 色彩恒常性是摄像机流水线中消除场景光照引起的图像偏色的一个重要过程。近年来，利用深度神经网络（DNNs）在色彩恒常性精度方面取得了显著的提高。然而，现有的基于DNN的颜色恒定性方法学习不同摄像机的不同映射，这需要对每个摄像机设备进行昂贵的数据采集过程。本文开创性地将多领域学习引入到色彩恒常性领域。对于不同的摄像机设备，我们训练了一个共享同一特征提取和光源估计器的网络分支，并且只使用摄像机特有的信道重加权模块来适应摄像机特有的特性。这种多域学习策略使我们能够从跨设备的训练数据中获益。提出的多域
【跨数据库人脸识别解决方案】：MATLAB技术的潜力与应用
[【跨数据库人脸识别解决方案】：MATLAB技术的潜力与应用](https://opengraph.githubassets.com/98a4e44e901010fa75e1a87057300643b1cb752c51c98a9b84555afd589ce6de/abhishekvarun/Face-Recognition-MATLAB) ...
【XML样式关联故障快速定位】：专家级解决方案与操作流程
[解决This XML file does not appear to have any style information associated with it.错误](https://ponderthebits.com/wp-content/uploads/2018/02/39_XML.png) # 1. XML基础和关联故障概述 ## XML定义与重要...
详解CSS外边距折叠引发的问题
01-19
第一种：两个块级元素的上下边距折叠 第二种：父元素和子元素（或者最后一个元素）的外边距 第三种：空的块级元素的上下外边距 折叠的根本原因： margin之间直接接触，没有阻隔 折叠后外边距的计算： 1.如果两个外边距都是正值，折叠后的外边距取较大的一个 2.如果两个外边距一正一负，折叠后的边距为边距之和 3.如果两个外边距都为负数，折叠后边距为较小的边距 解决方案：解决方法实际上也就是阻止外边距直接接触 第一种、第三种：只有静态流的元素才会发生外边距合并故设置float position inline-block都可以 <style> .bother{ width:
margin重叠--外边距折叠的出现场合及解决方法
weixin_44422456的博客
06-21 520
行为定义 外边距折叠：块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。 一、出现外边距折叠的三种情况 1.同级别块级元素之间： 当对于上下垂直的两个块级元素之间未设置浮动（ ‘ float ’ 以及 ‘ position：absolute’ ）时 上方块级元素的margin-bottom与下方块级元素的margin-top就会发生合并： <!...
外边距重叠及解决
qq_38482205的博客
01-07 454
外边距重叠 margin-collapse普通流相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。 这种合并外边距的方式被称为折叠，结合而成的外边距称为折叠外边距。 折叠结果遵循下列计算规则： 两个相邻的外边距都是正数时，折叠结果是他们两者之间的最大值 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值 两个外边距一正一负时，折叠结果是两者的相加的和 如何避免外边距折叠： 通过BFC(块级格式化上下文) float
CSS外边距塌陷（折叠）问题
sandy_star
11-27 719
外边距塌陷（折叠） 比如我们想要一个元素的下外边距有10px，而另一个元素的上边距是10px，那么这两个元素之间的空隙应该是20px。但是事实并不是如此，事实是只会显示10px。 css设计的初衷就是为了美观，而内边距塌陷（折叠）也就完美的解决了这个问题。 什么时候会出现外边距塌陷？ 外边距塌陷是为了解决垂直方向上的缝隙而设计的。因为只会出现在垂直方向上。 只会发生在块级元素上，而不是行内元素，也不是行内块级元素 外边距计算 正数 && 正数 ：取最大的数 负数 &&am
如何解决外边距叠加的问题？
08-05 598
一、首先你要知道什么情况下会触发：两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠 1.两个或多个 说明其数量必须是大于一个，又说明，折叠是元素与元素间相互的行为，不存在 A 和 B 折叠，B 没有和 A 折叠的现象。 2.毗邻 是指没有被非空内容、padding、border 或 clear 分隔开，说明其位置关系。 注意一点，在没有被分隔开的情况下，一个
CSS外边距折叠问题
若水弹丸之地
03-15 1011
毗邻的两个或多个margin会合并成一个margin，叫做外边距折叠，也叫外边距合并。 如果你还是不懂请参照：CSS 外边距合并 两点： 1）折叠只会发生在垂直方向 2）折叠永远是上面吞并下面 规则如下： 1. 两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠 2. 当一个父元素包含 一个子元素时，它们的上下外边距会发生折叠。 3. 元素自身（空元素）的marg...
【CSS面试题】外边距折叠的原因和解决
最新发布
weixin_63681863的博客
03-09 630
什么时候出现外边距塌陷 为什么外边距塌陷 怎么解决外边距塌陷
CSS-外边距折叠问题
weixin_40870788的博客
07-09 1313
外边距折叠 块级元素的上外边距和下外边距有时会合并（或折叠）为一个外边距，其大小取其中的最大者，这种行为称为外边距折叠（margin collapsing），有时也翻译为外边距合并。 &lt;!-- 外边距折叠演示 --&gt; &lt;div class="collapesd-test"&gt; &lt;div id="top-div"&gt;&lt;/div&gt; ...
margin重合(外边距重叠)及解决方法
热门推荐
liuye066的专栏
05-25 1万+
CSS 外边距重叠(外边距塌陷) 块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。 一、哪些元素会发生外边距重叠问题 外边距的重叠只产生在普通流文档的上下外边距之间， 只有 块元素 会发生外边距重叠，行内元素 和 行内块元素 都不会发生外边距重叠问题 二、什么情况下会发生外边距重叠呢 第一种情况： 相邻兄弟元素的marin-bottom和margin-top的值
CSS border-radius失效问题的解决方案
本文将对border-radius失效的常见原因以及相应的解决方案进行详细探讨。 首先，了解border-radius属性的基本用法对于调试失效问题至关重要。border-radius属性可以接受1到4个值，分别应用于元素的四个角，也可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值