CSS外边距合并

最新推荐文章于 2022-12-05 00:06:00 发布
最新推荐文章于 2022-12-05 00:06:00 发布
阅读量304 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： CSS 文章标签： CSS外边距合并
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Lxj1107020234/article/details/80627083
本文详细解释了CSS中块级元素的外边距合并现象，包括相邻元素、父子关系元素及空块元素间的外边距如何合并，并指出行内框、浮动框或绝对定位的元素不会发生此类合并。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

    外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。而只有普通文档流中的块框垂直外边距才会发生合并。行内框、浮动框或绝对定位不会发生外边距合并。

1、相邻元素

   

2、父子关系元素

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并


3、空块元素



css零到一基础教程024：CSS 外边距合并
kerryqpw的博客
03-19 147
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 外边距合并 外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。 简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图： 实例： <h.
CSS的外边距合并规则
低代码布道师的博客
10-24 779
比如我们这里有三个容器，A和B都设置了外边距10px，那他们在水平方向的间距是一个求和关系，一共是20px。使用 CSS Flexbox 或 Grid 布局可以更好地控制元素之间的间距，避免外边距合并的问题。有时候，我们给组件设置了外边距，但是在实际运行可能和预期不符，这里有一个知识点叫外边距合并规则。但是A和C，在垂直方向的间距，感觉应该是40px的间距，但实际是取的最大值是30px。直接调整元素的 margin 值，以确保它们之间的间距符合您的设计需求。3、使用 Flexbox 或 Grid 布局。
CSS的border 边框padding 内边距margin 外边距，外边距合并，塌陷问题解决方法
m0_51796659的博客
09-24 604
盒子模型（Box Model)组成 border 边框 content 内容 padding 内边距 margin 外边距 所谓盒子模型：就是把HTML页面中布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。 CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容。
div+css之 css框模型 内边距 边框 外边距 外边距合并
wml
05-18 2664
1、CSS 框模型: 术语翻译 ·        element : 元素。 ·        padding : 内边距，也有资料将其翻译为填充。 ·        border : 边框。 ·        margin : 外边距，也有资料将其翻译为空白或空白边。     元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边
CSS-盒子模型-内容，边框，内边距，外边距，（合并，塌陷情况）
weixin_48370579的博客
12-05 598
CSS-盒子模型-内容，边框，内边距，外边距，(合并，塌陷情况) 目标：能够认识 盒子模型的组成 ，****能够掌握盒子模型 边框、内边距、外边距 的****设置方法 学习路径： 1. 盒子模型的介绍 2. 内容区域的宽度和高度 3. 边框( border ) 4. 内边距( padding ) 5. 外边距(margin) 1.1 盒子模型的介 小结 ➢ 盒子模型一共有几个部分组成？分别...
关于CSS外边距合并问题简述
m0_63803138的博客
12-17 462
一、子父类边框合并 问题概述：比如在父级中有一子级，父级外边框为20px，子级外边框为20px，当子级外边框变大时，打开浏览器发现子级外边框并没变化，而是父级外边框变化了子级边框的数值。 解决方法： 1.给父级元素设置外边框 2.将子级元素改变的外边框距离转换成父级元素的内边框距离 3.使用overflow：hidden；来隐藏父级超出定义的边框 4.使用行级元素跟块级元素的属性问题display：inline-block；来使其同时获得行级跟块级属性 5.利用浮动float来进行调节 6.使用绝对定位 类
【CSS】盒子模型-边框-内外边距-外边距合并-清除内外边距-圆角边框-盒子阴影-文字阴影
YK菌的博客
12-01 1247
文章目录1. 盒子模型（Box Model）组成2. 边框 border表格的细线边框边框会影响盒子的实际大小3. 内边距 paddingpadding会影响盒子大小盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小4. 外边距 margin让块级盒子水平居中让行内元素、行内块元素水平居中5. 外边距合并相邻块元素垂直外边距合并解决方法嵌套块元素垂直外边距的塌陷解决方法6. 清除内外边距7. 圆角边框8. 盒子阴影9. 文字阴影 1. 盒子模型（Box Model）组成 b
CSS外边距合并代码
09-25
外边距合并是CSS布局中一个常见的现象，特别是涉及到元素垂直排列时。当我们为相邻元素设置外边距时，有时它们并不会简单地相加，而是会合并成一个较大的值，这被称为外边距合并或外边距折叠。 在CSS中，有两种主要...
解决margin 外边距合并问题
12-14
在网页布局设计中，CSS（层叠样式表）的margin外边距合并是一个常见的问题，尤其是在元素间的间距处理上。这种现象通常被称为“外边距塌陷”（Margin Collapsing），它涉及到相邻或嵌套元素的外边距计算方式。下面...
浅谈Js作用域以及执行期上下文
sunshine的博客
07-11 1808
作为一个爱美丽也爱学习的程序媛，现在和大家聊一聊js作用域以及执行期上下文那些事儿、、、 作用域 这个有点不知道怎么说，感觉这个名词已经够直白了，作用域顾名思义就是其作用范围，如下代码所示： var a = 'hello' ; function demo1 (){ var b = 0; } console.log(a); //hello console.log(b); //报错 Unc...
#js--上下文、作用域、闭包、this
七元八元
05-13 598
王福朋：js原型和闭包 慕课网：js深入浅出 1.this 中的指向 判断this的指向（1-4优先级逐级递减，1优先级最高，4优先级最低）：1、函数被new调用，this指向由new新构造出来的这个对象；2、函数通过call()、apply()、bind()调用，this指向被绑定的对象；3、函数作为方法被调用，this指向这个对象（即常说的对象上下文）；...
理解 JS 作用域链与执行上下文
包磊磊的博客
08-22 816
贫道，感觉，JS的坑，不是一般地大。 变量提升： 变量提升（ hoisting ）。 我可恨的 var 关键字： 你读完下面内容就会明白标题的含义，先来一段超级简单的代码： <script type="text/javascript"> var str = 'Hello JavaScript hoisting'; console.log(str); //...
理解JavaScript中的作用域和上下文
weixin_30702887的博客
03-22 259
JavaScript对于作用域（Scope）和上下文（Context）的实现是这门语言的一个非常独到的地方，部分归功于其独特的灵活性。 函数可以接收不同的的上下文和作用域。这些概念为JavaScript中的很多强大的设计模式提供了坚实的基础。 然而这也概念也非常容易给开发人员带来困惑。为此，本文将全面的剖析这些概念，并阐述不同的设计模式是如何利用它们的。 Statement 作者：景庄，...
js作用域和执行上下文的区别
chiuwingyan的博客
05-17 8594
前言之前，我以为作用域和执行上下文是同一个概念，其实并不是，这里很多人都会把它们混淆了。上下文 vs 作用域每个函数调用都有与之相关的作用域和上下文。从根本上说，范围是基于函数(function-based)而上下文是基于对象(object-based)。换句话说，作用域是和每次函数调用时变量的访问有关，并且每次调用都是独立的。上下文总是关键字 this 的值，是调用当前可执行代码的对象的引用。作...
浅谈CSS外边距合并
筱葭的博客
11-08 3016
1、外边距合并 当有负边距存在时，合并后的外边距将是最大正边距加上最小负边距（即负边距中绝对值最大的一个）。 （1）相邻兄弟元素 相邻的两个兄弟元素的之间的外边距会塌陷（当后者被清除浮动时除外）。 段落一 段落二 这两个段落间的距离，不是段落一的下边距与段落二的上边距的和50px，而是两者中的较大者30px。 （2）块级父元素与其第一个/最后一个子元素 块级父元素中，不存在b
js中的执行上下文和作用域
houshufen
12-06 1475
一、执行上下文1、什么是执行上下文？ 分析一个问题之前，首先我们都需要知道它是什么。执行上下文又称词法环境，它是存储和处理数据的栈，主要分为两部分： 预处理阶段： ①在这个阶段它会将所有的var类型的变量存入上下文中并给它赋值为undefined; ②除此之外，它还会将声明的函数存入栈中，并将函数体赋值给它。 ③还有一个就是this对象 执行阶段： ①给词法环境中的变量进行
CSS-盒模型、默认样式、边距合并、inline-block、外边距合并
Pluto_lei的博客
09-27 616
块级盒子 vs. 内联盒子 Block box vs. Inline box 代码案例 块级盒子和行级盒子的差异 <p>欢迎<p> <p>来饥人谷学习</p> <span>前端</span> <span>Java</span> <style> p { border: 1px solid black; } span { border: 1px
JavaScript作用域、上下文、执行期上下文、作用域链、闭包
山水子农
11-07 8471
  作用域、上下文、执行期上下文、作用域链、闭包是JavaScript中关键概念之一，是JavaScript难点之一，在应聘面试时必定会问到的问题，作为前端工程师必须理解和掌握。相信大家已经阅读了很多关于这方面的文章，但是看完之后似懂非懂。在我阅读了《JavaScript高级程序设计》、《高性能的JavaScript》这两本书后，我才完全理解这些概念。 一、作用域(Scope)   作...
margin-top 外边距合并
最新发布
12-30
### CSS 中 `margin-top` 外边距合并现象 当两个垂直方向上的外边距相遇时，它们不会简单相加而是形成一个单一的外边距，这就是所谓的外边距合并。这种行为不仅发生在兄弟元素之间，也存在于子元素与其父元素间。 对于父子元素间的外边距合并情况，在某些布局下，子元素设置的上外边距可能会超出其容器边界并影响到外部布局结构[^3]。 #### 解决方案一：使用 `overflow:hidden` 通过给定样式 `.parent { overflow: hidden; }` 可以有效地阻止内部子元素的顶部外边距溢出至父级元素之外。此方法利用了BFC（块格式化上下文），使得父元素能够包裹住所有的子元素而不受其内外边距的影响[^4]。 ```css .parent { width: 100px; height: 100px; background: #f5f5f5; overflow: hidden; } .son { width: 50px; height: 50px; margin-top: 10px; background: pink; } ``` #### 解决方案二：应用 `padding` 或者 `border` 另一种方式是在父元素上增加内边距或边框来破坏默认的外边距合并机制。这样做同样能防止子元素的外边距穿透父元素范围。 ```css .parent { width: 100px; height: 100px; padding-top: 1px; /* 添加最小单位的内边距 */ background: #f5f5f5; } .son { width: 50px; height: 50px; margin-top: 10px; background: pink; } ``` #### 解决方案三：改变显示模式 还可以考虑更改HTML元素的display属性值为`inline-block`或其他非静态定位的方式，从而避免标准流中的外边距合并问题发生[^2]。 ```css .parent { display: inline-block; width: 100px; height: 100px; background: #f5f5f5; } .son { width: 50px; height: 50px; margin-top: 10px; background: pink; } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值