外边距合并、外边距塌陷，如何形成，及解决方法

最新推荐文章于 2023-03-19 23:48:26 发布
最新推荐文章于 2023-03-19 23:48:26 发布
阅读量166 收藏
点赞数
分类专栏： 前端面试题 HTML 文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gjt1234/article/details/127601553
版权

水平布局的盒子，左右margin正常，两者距离为左右margin之和

    1、外边距折叠现象-合并：

    垂直布局的同级块级元素，上下margin会合并，两者距离为最大一方margin

        解决方法：

                ①开发时，避免出现垂直布局的上下相邻块级元素之间同时出现margin-top、margin-bottom

    2、外边距折叠现象-塌陷：

    互相嵌套的块级元素，子元素的margin-top会作用在父元素之上会导致连带父元素一起往下移动

        *解决方法：

             ①父元素设置border-top或者padding-top

            ②父元素设置overflow：hidden；

            ③转为行内块元素      

            ④设置浮动

搬砖IT员
关注
专栏目录
css拓展--盒子外边距塌陷/合并问题及其解决方法
zxn200125的博客
10-16 964
盒子外边距塌陷/合并问题及其解决方法
盒子模型之外边距合并问题
最新发布
mandarin_blog的博客
07-31 332
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
外边距合并跟外边距塌陷以及解决方案
m0_53456432的博客
07-21 217
上下相邻的两个块级元素相遇时，若上面的块元素有margin-bottom，下面的元素有margin-top，则它们垂直间距不是二者之和，而是二者之间的最大值。解决方案尽量只给一个元素设置外边距。
外边距塌陷与合并
奇奇怪怪
08-05 172
初学的代码人在使用margin的时候，在某些情况下会发现一个问题就是不管怎么加margin盒子就是不会动，有时候又只会左右动上下不能动，这就是今天要学习的内容嵌套块元素垂直外边距的塌陷和相邻块元素垂直外边距的合并。 一、嵌套块元素垂直外边距的塌陷 1.1 什么是嵌套块元素垂直外边距的塌陷 如下图所示，给蓝色盒子添加margin-top:50px;后，正常情况是蓝色...
外边距合并问题（外边距塌陷）
weixin_45646245的博客
11-23 442
注意：外边距合并问题是发生在给两个块元素设置垂直外边距时（也就是margin-top和margin-bottom） 第一种：两个块元素为兄弟关系 当上下相邻的两个块元素，上边个块有margin-bottom，下边个块有margin-top的时候就会发生外边距合并 合并原则：取margin-bottom和margin-top中较大的一个值作为它们之间的距离 解决方案：尽量只给一个盒子添加margin值 第二种：两个块元素为父子关系 父元素没有上内边距(padding-top)和边框(border)时，
外边距塌陷/外边距合并
m0_49034593的博客
08-12 360
外边距合并/塌陷问题
外边距折叠现象--塌陷现象
weixin_43368552的博客
05-05 100
场景：相互嵌套的 块级元素，子元素的margin-top会作用在父元素上。 结果：导致父元素一起往下移动。 解决方法： 1.给父元素设置border-top或者padding-top（分隔父元素的margin-top） 2.给父元素设置overflow-hidden 3.转为行内块元素 4.设置float 伪元素：一般在页面的非主体内容可以使用伪元素 伪元素和真实元素的区别： 元素：html设置的标签 伪元素：由css模拟出的标签效果 种类： ：：before ：：after 必须设置content属性才
在html中通过使用css解决外边距重叠（外边距塌陷）问题
小杨的博客
07-18 2048
【什么是外边距重叠，重叠的结果是什么？ 】 1.什么是外边距重叠？ 外边距重叠指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的高...给大家分享一下什么是外边距重叠？重叠的结果是什么？1.背景介绍外边距是盒子模型中的一个属性。在使用外边距时，有可能会发生外边距重叠。2.知识...给大家分享一下什么是外边距重叠？重叠的结果是什么？1.背景介绍外边距是盒子模型中的一个属性。在使用外边距时，有可能会发生外边距重叠。2.知识...给大家分享一下什么是外边距
解决外边距合并（塌陷）问题
中意你的博客
05-04 1647
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。 解决方案： 可以为父元素定义1像素的上边框或上内边距。 border: 1px solid red; padding: 1px; 可以为父元素添加overflow:hidden。overflow: hidden;...
css怎么把多个块合并,CSS外边距合并&块格式上下文
weixin_39590601的博客
08-04 647
前言之前在前端开发的过程中，都没有遇到外边距合并的问题(其实是因为大多时候都直接用前端样式库(〃'▽'〃))，这一次需要动手排一个页面，也挺简单，但是遇到了一个奇怪的问题，所以学习记录一下。问题测试代码如下：test* {margin: 0;padding: 0;}body {max-width: 750px;margin: 0 auto;}.div1 {background: yellow;he...
外边距合并和塌陷
zwrefine的博客
08-28 459
外边距合并：垂直方向的两个盒子，如果都设置了垂直方向的外边距，则取较大值<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style > .one { width: 300px; heig
外边距塌陷和合并
weixin_45849112的博客
03-20 99
这就出现了外边距塌陷 为什么会出现这个呢 因为 BFC的布局规则 规定相邻的俩个盒子（父子关系 相邻的兄弟关系）会有内边距重叠 那么什么是BFC呢 全称是box-formatting-context (块级格式化上下文) 它是一个独立的渲染区域规定了内部block-level的盒子如何渲染并且不影响外部元素 这个例子中 body 这个标签 具有BFC的特点 但不是BFC BFC的规则或者说是特点 1.独立且隔离的一个区域 2.里面的盒子垂直排列 3.属于同一个BFC相邻的俩个盒子（父子关系 相邻的兄弟关系）
CSS中的外边距合并问题（外边距塌陷）
sinat_41660714的博客
11-11 615
margin margin指外边距，是盒子模型的组成之一（盒子=内容+边框+外边距+内边距），类似于表格中的cellspacing，具体用法如下： 一个值时，指定上右下左的外边距 两个值时，第一个值为上下外边距，第二个值为左右外边距 三个值时，第一个值为上外边距，第二个值为左右外边距，第三个值为下外边距 四个值时，分别对应上、右、下、左四个外边距 也可以单独设置，如margin-left，mar...
外边距塌陷（外边距合并）
lvanboy的博客
03-08 392
外边距合并 使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。 相邻块元素垂直外边距的合并 当上下相邻的两个块元素相遇时如下图，如果上面的元素设置了下外边距margin-bottom，下面的元素设置上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距...
外边距折叠现象--合并、塌陷问题
weixin_54262933的博客
02-25 153
自学疑问记录
【CSS】盒子模型-边框-内外边距-外边距合并-清除内外边距-圆角边框-盒子阴影-文字阴影
YK菌的博客
12-01 1133
文章目录1. 盒子模型（Box Model）组成2. 边框 border表格的细线边框边框会影响盒子的实际大小3. 内边距 paddingpadding会影响盒子大小盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小4. 外边距 margin让块级盒子水平居中让行内元素、行内块元素水平居中5. 外边距合并相邻块元素垂直外边距合并解决方法嵌套块元素垂直外边距的塌陷解决方法6. 清除内外边距7. 圆角边框8. 盒子阴影9. 文字阴影 1. 盒子模型（Box Model）组成 b
css外边距折叠塌陷
saber的博客
07-19 307
博主对外边距折叠问题的总结   外边距折叠，指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距。其中所说的 margin 毗邻，可以归结为以下两点： 这两个或多个外边距没有被非空内容、padding、border 或 clear 分隔开。 这些 margin 都处于普通流中。 发生折叠的情况 两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠。 ...
【CSS】盒子模型外边距 ⑤ ( 模型盒子垂直外边距的合并 - 塌陷 | 相邻模型盒子垂直外边距合并 | 嵌套模型盒子垂直外边距合并 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-19 629
一、相邻模型盒子垂直外边距合并 - 塌陷 1、外边距塌陷现象说明 2、代码示例 - 塌陷效果 二、嵌套模型盒子垂直外边距合并 - 塌陷 1、外边距塌陷现象说明 2、代码示例 - 塌陷效果 3、代码示例 - 解决塌陷问题 - 为父容器添加 overflow:hidden 样式 4、代码示例 - 解决塌陷问题 - 为父容器设置边框 5、代码示例 - 解决塌陷问题 - 为父容器设置内边距
关于外边距塌陷(外边距合并)
m0_59306855的博客
10-11 141
什么是外边距塌陷? 由于父级元素没有高度，下面的元素会顶上去，造成页面的塌陷,且只有上下外边距才会出现此类问题而左右外边距不会,常出现在父元素和子元素、兄弟元素之间 具体表现如下，这是整个代码 由上图可以看到我想要的效果是你好在box2中离上边距为10px,可整个box2都向下移动了10px,这种现象就称为外边距塌陷(也叫外边距合并) 解决方法 1.对父元素设置overflow:hidden;(万能方法!) 完美解决当前问题 2.对父元素设置边框border 但是...
CSS外边距折叠与高度塌陷问题
weixin_43339112的博客
05-30 397
一. CSS外边距折叠问题 在CSS垂直布局中，相邻方向的垂直外边距会发生重叠现象。 垂直外边距折叠问题分2种情况： 兄弟元素 在相邻兄弟元素的垂直外边距中，当发生重叠时，会取两者之间的较大值。 该现象可以避免两个元素间的距离过大，在实际开发中通常是有利的，无需处理。 eg: 元素A margin-bottom:100px; 相邻兄弟元素B marigin-top:200px; 则元素A与B间的外边距为200px。 *如果兄弟元素的垂直外边距一正一负，则取两者之和；如果均为负值，则取两者绝对值较大的值
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值