嵌套块元素垂直外边距的合并（塌陷）

最新推荐文章于 2024-06-27 15:44:29 发布

原创最新推荐文章于 2024-06-27 15:44:29 发布 · 860 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

30 篇文章

订阅专栏

本文探讨了在CSS布局中，当两个嵌套块元素的上外边距发生合并现象时的解决方案。这种情况通常发生在父元素没有上内边距或边框时。文章提供了几种避免外边距合并的方法，包括为父元素添加上边框、内边距或使用overflow:hidden属性，以及通过浮动或绝对定位来解决这一问题。

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框
父元素的上外边距会与子元素的上外边距发生合并
合并后的外边距为两者中的较大者

解决方案：

可以为父元素定义上边框。
可以为父元素定义上内边距
可以为父元素添加overflow:hidden。
使用浮动或者绝对定位(固定定位)也可以解决外边距合并问题

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

LeonGus

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

CSS盒状模型-描述网页元素布局，HTML元素抽象为矩形盒子，由内容（content）、内边距（padding）、边框（border）、外边距（margin）以及实际开发中的具体应用（详细讲解）

weixin_43608968的博客

09-17

120

本教程详细介绍了CSS中的盒子模型，包括边框、内边距和外边距的使用，以及它们如何影响元素的尺寸。每个知识点都有精彩的案例支持，同时也讨论了边框合并、外边距合并的现象及解决方案，并探讨了CSS3的新特性如圆角边框、盒子阴影和文字阴影。此外，还提到了在布局前清除默认内外边距的重要性。

CSS:嵌套的块级元素垂直外边距margin合并（塌陷）

weixin_46682277的博客

12-08

686

对于两个嵌套关系的块级元素，如果父元素没有上边距或边框，父元素的上外边距会与子元素的上外边距发生合并情况(塌陷)。 <style> .father, .son{ width:200px; height:200px; background-color:hotpink; } .son{ margin-top:30px; } </style> <div class="father"> <div class="son"> </div> </di

参与评论您还未登录，请先登录后发表或查看评论

CSS：解决嵌套块元素垂直外边距的合并（塌陷）

weixin_40546229的博客

03-26

556

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框父元素的上边距会与子元素的上边距发生合并合并后的外边距为两者中较大者解决方案：可以为父元素定义上边框可以为父元素定义上内边距 可以为父元素添加 overflow:hidden; 浮动、固定、绝对定位的盒子不会有问题 ...

外边距合并-嵌套块级元素垂直外边距塌陷【浮动盒子不会有出现这个问题】

weixin_43837268的博客

09-28

444

方法： 1.给父元素加边框 2.给父元素加内边距 3.给父元素加overflow：hidden <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-C

相邻块元素垂直外边距的合并

虎康的博客

01-10

579

当上下相邻的两个块元素相遇时，如果上面的标签有下外边距margin-bottom，下面的标签有上外边距margin-top，则它们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

嵌套块元素垂直外边距塌陷

最新发布

10-16

嵌套块元素垂直外边距塌陷是指当父元素没有padding和border时，子元素与父元素直接相邻，子元素的margin值会传递给父元素，并且再次与父元素的margin值发生合并，取两个值的较大值，负值取绝对值较大值[^1]。...

解决margin 外边距合并问题

12-14

这种现象通常被称为“外边距塌陷”（Margin Collapsing），它涉及到相邻或嵌套元素的外边距计算方式。下面我们将详细探讨这个问题以及如何解决它。 ### 一、兄弟元素的外边距合并当两个或多个块级元素相邻，它们...

CSS的三大特性（层叠性，继承性，优先级），CSS盒子模型（边框（边框复合写法，边框分开写发，表格的细线边框），内边距，外边距（外边距典型应用，外边距合并塌陷，清除内外边距））

shy的博客

03-14

300

CSS的三大特性层叠性相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题层叠性原则: 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式样式不冲突，不会层叠继承性 CSS中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号。恰当地使用继承可以简化代码，降低 CSS 样式的复杂性。子元素可以继承父元素的样式：（text-，font-，line-这些元素开头的可以继承，以及color属性）行高的继承性：

【CSS】盒子模型-边框-内外边距-外边距合并-清除内外边距-圆角边框-盒子阴影-文字阴影

YK菌的博客

12-01

1272

文章目录1. 盒子模型（Box Model）组成2. 边框 border表格的细线边框边框会影响盒子的实际大小3. 内边距 paddingpadding会影响盒子大小盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小4. 外边距 margin让块级盒子水平居中让行内元素、行内块元素水平居中5. 外边距合并相邻块元素垂直外边距合并解决方法嵌套块元素垂直外边距的塌陷解决方法6. 清除内外边距7. 圆角边框8. 盒子阴影9. 文字阴影 1. 盒子模型（Box Model）组成 b

CSS：相邻块元素垂直外边距合并、嵌套块元素外边距塌陷

听海边涛声

06-27

638

CSS：相邻块元素垂直外边距合并、嵌套块元素外边距塌陷

相邻块级元素垂直外边距的合并

新阿巴阿巴

09-18

550

原因当上下相邻的两个块元素相遇时如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top 则他们之间的垂直间距不是margin-bottom与margin-top之和而是取两个值中的较大者」这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）解决方案尽量给只给一个盒子添加margin值 ...

处理CSS中嵌套块元素垂直外边距的合并（塌陷现象）

qq_42837306的博客

01-18

628

@处理CSS中嵌套块元素垂直外边距的合并（塌陷现象） ##3现象对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者。 ###处理 1.可以为父元素定义上边框。 2.可以为父元素定义上内边距。 3.可以为父元素添加overflow:hidden。 ...

CSS: margin—相邻块元素垂直外边距的合并、嵌套块元素垂直外边距的塌陷

weixin_43932309的博客

12-09

1294

相邻块元素垂直外边距的合并现象两种解法； 嵌套块元素垂直外边距的塌陷现象四种解法

嵌套块元素塌陷问题（父元素与子元素的垂直外边距）

weixin_43338566的博客

04-13

705

嵌套块元素塌陷问题：1、父元素没有设置上外边距的情况下，给子元素设置的上外边距会传递给父元素。2、父元素和子元素同时设置上外边距，此时父元素的上外边距的值是两者中值较大的那一个，并且给子元素设置的上外边距无效。解决办法：在样式中给父元素设置overflow属性值为“hidden”。 .father{ width: 300px; height: 300px; backgro...

CSS中怎样合并相邻块元素垂直外边距？

zy1992As的博客

12-04

159

当上下相邻的两个块元素(兄弟关系)相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。本节我们来学习相邻块元素垂直外边距的合并和嵌套块元素垂直外边距的塌陷的外边距合并，清除盒子内多余的内外边距。网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。对于两个嵌套关系(父子关系)的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

外边距合并和嵌套块元素塌陷问题及解决方法

qq_44755188的博客

04-16

621

相邻块元素垂直外边距合并 * { padding: 0; margin: 0; } .father { width: 300px; height: 300px; background-color: chartreuse; margin-bottom: 100px; ...

嵌套块元素塌陷处理

m0_60679611的博客

01-08

473

塌陷： explanation：父子块元素同时有上外边距，

嵌套块元素垂直外边距合并造成的塌陷

qq_37492948的博客

01-17

347

嵌套块元素垂直外边距合并造成的塌陷我们先看例图由于父元素没有设置上边框或者上内边距，导致父子的top外边距合并；解决办法父元素设置上边框父元素设置内边距 父元素设置overflow: hidden; 设置为浮动或者定位元素 ...