~48外边距的折叠

最新推荐文章于 2026-01-08 13:19:01 发布

原创最新推荐文章于 2026-01-08 13:19:01 发布 · 155 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css #html

html和css 专栏收录该内容

111 篇文章

订阅专栏

一、垂直外边距的重叠

相邻的垂直方向的外边距会发生重叠现象，其中分为两种情况，一种是兄弟元素间的重叠，另一种是父子元素间的重叠

二、兄弟元素的重叠

兄弟元素间相邻的垂直外边距取较大值（两者都为正值的情况）

兄弟元素间相邻的垂直外边距取两者之和（一正一负）

兄弟元素间相邻的垂直外边距取绝对值较大的（两者都是负值的情况）

兄弟元素间的重叠对开发有利，不需要处理

三、父子元素的重叠

父子元素间相邻的外边距，子元素会传递给父元素（上外边距）

父子元素间的重叠影响页面布局，需要处理

两种方式：使用内边距（需要修改父元素的高度）

为父元素添加上边框（需要修改父元素的高度）

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

sanda_nd

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【CSS面试题】外边距折叠的原因和解决

weixin_63681863的博客

03-09

712

什么时候出现外边距塌陷为什么外边距塌陷怎么解决外边距塌陷

CSS 外边距重叠

Azure_c_c的博客

01-31

143

外边距的折叠垂直方向相邻的外边距，会发生外边距的折叠现象 兄弟元素之间的相邻垂直外边距 兄弟元素间两个相邻的外边距，会取两个外边距的绝对值的最大值。如果相邻元素间外边距一个设置正数数，一个设置负数，那么取它们之间的和父子元素之间相邻垂直外边距 父子元素的相邻垂直外边距，子元素的外边距会传递给父元素解决父子元素相邻垂直外边距，子元素外边距传递的方案 1、在子元素之前加一个table标签。 2、用伪元素解决：父元素的：before伪元素设置属性： content: ‘’; display:table

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

外边距折叠

weixin_45825917的博客

03-16

385

那么 ul 的 margin-top 可能会和 container 的 margin-top 发生折叠，最终取 5px，而不是 10px。在 CSS 中，如果一个列表的上下 margin 都设置为 5px，那么相邻元素的上下 margin 可能会发生“外边距折叠（Margin Collapse）”，从而影响实际的间距。也会折叠，最终两个 li 之间的间距仍然是 5px，而不是 10px。两个 div 之间的间距 = max(5px, 5px) = 5px，而不是 5px + 5px = 10px。

如何理解HTML外边距折叠,深入理解 CSS 中的外边距折叠及 BFC

weixin_30818373的博客

06-05

384

作为一个前端工程师，在编写 CSS 时外边距折叠及 BFC 都是经常遇到的情况，今天就来做一下总结。外边距折叠什么是外边距折叠在 CSS 中，两个或者多个普通流中相邻盒子的边距在垂直方向上会发生折叠的这种现象叫做外边距折叠。外边距折叠分为父子外边距折叠及兄弟外边距折叠。示例1：父子外边距折叠我们给 child 添加了 margin-top，却导致 body 整体下移。示例2：兄弟外边距折叠我们给 ...

如何理解HTML外边距折叠,详解CSS外边距折叠引发的问题

weixin_42511517的博客

06-05

283

第一种：两个块级元素的上下边距折叠第二种：父元素和子元素(或者最后一个元素)的外边距第三种：空的块级元素的上下外边距折叠的根本原因：margin之间直接接触，没有阻隔折叠后外边距的计算：1.如果两个外边距都是正值，折叠后的外边距取较大的一个2.如果两个外边距一正一负，折叠后的边距为边距之和3.如果两个外边距都为负数，折叠后边距为较小的边距解决方案：解决方法实际上也就是阻止外边距直接接触第一种、第三...

CSS 中的外边距折叠及 BFC

gaotlantis的博客

07-10

1080

外边距折叠是指当两个或多个块级元素的垂直外边距（即上边距和下边距）相遇时，它们会合并为一个外边距，而不是简单地相加。折叠后的外边距的高度等于参与折叠的各个外边距中的最大者。BFC（Block Formatting Context, 块级格式化上下文）是一种独立的渲染区域，它规定了内部元素如何布局，并且不会与外部的布局相互影响。BFC 可以用来解决很多 CSS 布局问题，比如清除浮动、避免外边距折叠等。

如何理解HTML外边距折叠,margin系列之外边距折叠

weixin_32432759的博客

06-05

252

不怀疑你也在工作中遇见过几乎可以不用怀疑，前端工作中的你一定遇见过 margin 折叠。不确定？别着急，你可能写过这样的代码：CSS:123p{margin:50px;}HTML:1234我是一个华丽的段落，别看我文字少我是另一个华丽的段落大家觉得这 2p 之间会发生点什么？是会合体呢？还是分开？来看看 DEMO1 margin折叠好吧，它们真的合体了。按照常规思路，这 2p 之间的空白应该是第一...

BFC & 外边距折叠

qq_46469137的博客

06-07

276

BFC BFC(Block fomatting context) = block-level box + Formatting Context Box Box即盒子模型 block-level box即块级元素，display属性为block,list-item,table的元素，会生成block-level box；并参与block formatting content inline-level box即行内元素，display属性为inline,inline-block,inline-table的

开启BFC可以解决外边距折叠的问题

JLY19970726的博客

10-29

352

现在给类名为"top"、"bottom"两个盒子都设置宽度、高度且都为"100px"、都设置外边距且都为"10px"，可以添加任意颜色便于区分两个盒子。外边距折叠好像很奇怪，实际上却很有用。如果想要清除两个盒子之间的外边距折叠，可以给目标盒子设置以下属性：1. display: inline-block2. float属性值不是"none"的元素3. 绝对定位现在给类名为"bottom"的盒子设置"position"属性为"absolute"，可以看到下方的盒子向下移动了，此时外边距折叠失效。

详解css外边距折叠（margin collapsing）

09-22

CSS中的外边距折叠指的是相邻的两个或多个块级元素的外边距（margin）会合并成一个外边距。这种情况在块级元素垂直排列时尤为常见，比如相邻兄弟元素之间、父元素与第一个或最后一个子元素之间以及空的块级元素之间...

详解CSS外边距折叠引发的问题

01-19

1.如果两个外边距都是正值，折叠后的外边距取较大的一个 2.如果两个外边距一正一负，折叠后的边距为边距之和 3.如果两个外边距都为负数，折叠后边距为较小的边距解决方案：解决方法实际上也就是阻止外边距直接接触 ...

外边距折叠1

08-08

在CSS布局中，外边距折叠（Margin Collapsing）是一个重要的概念，它涉及到元素间的垂直间距处理。这个现象主要发生在相邻元素的垂直外边距上，尤其是兄弟元素和父子元素之间的关系。我们来深入探讨这个主题。首先...

【CSS】圆锥渐变流光效果边框样式实现

最新发布

Komorebi_00的博客

01-08

【代码】【CSS】流光边框样式实现。

定位.轮播图详细解析

wangwei_456789的博客

01-05

727

2、开绝对定位的情况下，left:50%;margin 和left，right其中一个值为auto，四个值中，三个值固定，某一个值设为auto，则会调整这个auto值,1、开绝对定位的情况下，四边偏移量为相同的固定值，margin为auto。1、rgba/transparent是样式值，必须跟在固定的样式名后，当开启决定定位后，水平方向的布局等式就会加上left，right两个值。4、父元素转成单元格，设置水平垂直居中，同时将子元素设置为行内块元素。width 和left，right其中一个值，

CSS3 伸缩盒模型

洋葱的博客

01-06

169

一、伸缩容器、伸缩项目。五、flex-flow。十、flex复合属性。

理解 Flex 布局中的 flex:1 与 min-width: 0 问题

weixin_47124112的博客

01-08

585

Flex布局中min-width:0的作用解析在Flex布局中，当使用flex:1让元素分配剩余空间时，内容过长可能导致溢出容器边界。这是因为Flex项目默认具有min-width:auto，元素不会缩小到小于内容宽度。设置min-width:0可以覆盖此默认行为，允许元素收缩到小于内容宽度。通过实际案例演示可见，未设置时内容会溢出，设置后则能限制在容器内。此方案常用于响应式布局、侧边栏与主内容区布局以及表格文本截断等场景，通常配合overflow属性使用。关键点在于理解flex:1的收缩特性与min-w

CSS3 圆角

csbysj2020的博客

12-30

497

深入理解CSS弹性布局：构建现代响应式网页的

HANhylyxy的博客

01-03

5385

结论弹性布局是现代CSS中最实用的布局工具之一。通过掌握弹性布局，你可以轻松解决传统布局中的难题，创建出灵活、响应式的界面。虽然它只是CSS布局生态系统的一部分（与网格布局、多列布局等并存），但在处理一维布局需求时，弹性布局通常是首选工具。开始在你的项目中实践弹性布局吧！从简单的导航栏到复杂的卡片布局，你会发现许多曾经棘手的布局问题现在都能迎刃而解。

现代 CSS 革命 2026（上篇）：核心新特性全景解析

领码SPARK - 以无代码之星火，燎原数字之未来！

01-05

916

2026年，CSS已从传统样式语言进化为高度工程化的设计系统基石。容器查询打破视口束缚、层叠层终结特异性混乱、子网格重构嵌套布局、CSS Houdini开启底层扩展新纪元。本文深度解析这四大核心特性的原理、场景与实践，揭示CSS如何用更少代码构建灵活健壮的现代Web应用，为前端开发者提供全面、专业的技术指南。 🔑 关键字容器查询、层叠层、子网格、CSS Houdini、响应式设计、工程化

深度解析CSS margin属性：外边距折叠与应用策略

"CSS重要属性之 margin 属性知识大整合...理解并熟练运用margin属性及其外边距折叠规则，对于创建响应式和可预测的网页布局至关重要。通过细致的实践和学习，开发者能够更好地控制元素间的间距，实现精致的网页设计。