margin重叠问题

最新推荐文章于 2025-06-14 14:01:45 发布
原创 最新推荐文章于 2025-06-14 14:01:45 发布 · 426 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#float #border

margin重叠问题的解决办法：

父级：overflow:hidden、padding:1px、border:1px soild #000、 float:left

子级：float:left

margin重合(外边距重叠)及解决方法
热门推荐
liuye066的专栏
05-25 1万+
CSS 外边距重叠(外边距塌陷) 块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。 一、哪些元素会发生外边距重叠问题 外边距的重叠只产生在普通流文档的上下外边距之间， 只有 块元素 会发生外边距重叠，行内元素 和 行内块元素 都不会发生外边距重叠问题 二、什么情况下会发生外边距重叠呢 第一种情况： 相邻兄弟元素的marin-bottom和margin-top的值
如何理解margin重叠问题
weixin_47450807的博客
04-08 3592
一、写在前面 根据w3c规范，两个margin产生折叠的必备条件： 1、必须处于常规文档流（不能是浮动和定位）的块级盒子，并且处于同一个BFC当中。 2、没有线盒，没有空隙，没有padding和border将他们分割。 3、都处于垂直方向相邻的外边距。 二、例子 <!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compa
margin重叠问题及解决方案全览
比起未来可期，我更喜欢如约而至
02-05 4654
项目中遇到了margin重叠问题，基于之前对这块知识掌握不熟练，所以学习之后在这里做一个总结吧。
【CSS面经】什么是 margin 重叠问题？如何解决？
lph159的博客
12-07 1575
margin重叠（margin collapse）是指当两个垂直排列的块级元素的margin发生重叠时，最终的外边距会取两个margin值中的较大者，而不是两个margin的和。换句话说，margin重叠会导致元素之间的实际间距被缩减。
CSS 外边距(margin)重叠及防止方法
前端岚枫
12-08 3946
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。 两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。注意：相邻的盒子可能并非是由父子关系或同胞关系的元素生成。 但是边界的重叠也有例
margin 重叠问题的理解
ApologizeError的博客
05-12 1231
作者：爱前端不爱恋爱 链接：https://zhuanlan.zhihu.com/p/114257330 来源：知乎 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 块级元素的上外边距（margin-top）与下外边距（margin-bottom）有时会合并为单个外边距，这样的现象称为“margin合 并”。 产生折叠的必备条件：margin必须是邻接的! 而根据w3c规范，两个margin是邻接的必须满足以下条件： •必须是处于常规文档流（非float和绝对定位）的块级盒子，
关于BFC的特性，以及如何利用BFC解决margin溢出与margin重叠问题
u012925833的博客
05-22 2087
1. 何为BFC? 文章：https://juejin.im/post/5909db2fda2f60005d2093db#heading-8 BFC概括：可以在心中记住这么一个概念———所谓的BFC就是css布局的一个概念，是一块区域，一个环境。 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与...
有遇到过margin重叠/塌陷问题吗？BFC?
小草莓的博客
04-17 1632
1、什么是margin重叠/塌陷？ 2、开发中常见的margin塌陷 3、出现margin塌陷的原因 4、什么是BFC？ 5、BFC的6个特性 6、BFC的功能总结 7、触发BFC的CSS属性 8、解决margin塌陷的办法 ① 对于父子元素 ② 对于兄弟元素
【前端学习 - CSS（12）margin 重叠】
weixin_60364883的博客
02-21 928
1. margin 重叠 margin 重叠的规则 当两个 margin 都是正值的时候，取两者的最大值； 当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从 0 位置，负向位移； 当有正有负的时候，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加,即取和的绝对值 margin 重叠主要有四种情况的解决： 相邻兄弟元素 margin-bottom 和 margin-top 重叠。可以将其中一个设为 BFC； 父子元素 margin
margin边界重合问题及解决办法
WEB_YH的博客
11-19 1319
当一个元素的顶边界与父元素的定边界重合（注意：只有普通文档流中块框的垂直边界才会发生边界叠加。行内框、浮动框或绝对定位框之间的边界不会叠加。） 看如下代码： HTML代码： CSS代码： 我们预想的结果： 可实际结果： 边界重合带来的远远不止这些，当我们对P元素修饰margin垂直距离时，会导致父元素跟子元素一起进行margin操作。 解决办法：
关于margin上下重叠的问题
icesschen的博客
09-05 1万+
有两种情况：1、兄弟级的块之间，margin这个属性上下边距，经常会发生重叠的情况，以数值大的为准，而不会相加。 2、父子级的块之间，子级的上下margin会与父级上下margin重叠，以数值大的为准，而不会相加。 如何解决？第一种情况：1、float浮动或者 2、inline-block第二种情况：父级加1、overflow:hidden或者 2、加padding 或者3、加border 或者子
关于margin重叠的一些理解
lianglizhongblog
03-17 6114
当用margin进行页面布局时，有时会出现margin-top/margin-bottom没有效果的情况或者说没有按照我们“原以为”的效果，在查找BUG时，我们往往却没有意识或者了解到这其实是因为margin出现了重叠的原因： 一、相邻元素margin重叠： 效果： 如果按照我们的原来的“设想”，两个段落之间的距离应该是2em，但是效果却显示的是1em，这是因为第一段的mar
CSS Margin纵向重叠（Margin Collapse）问题详解
最新发布
zrblue的博客
06-14 584
CSS Margin纵向重叠（Margin Collapse）是相邻块级元素在垂直方向上的margin合并现象，实际间距会取较大值而非相加。常见于相邻兄弟元素、父元素与子元素以及空块元素之间。解决方法包括触发BFC、添加边框/内边距、使用Flex/Grid布局或行内块元素等。最佳实践建议统一使用margin方向（推荐bottom）、避免嵌套margin、优先使用padding以及采用现代布局方案。特殊情况下浮动/绝对定位元素、水平margin和根元素不会发生重叠。掌握这些技巧可以有效控制布局问题。
margin重叠该怎么解决？
BANaanaa的博客
09-12 1047
在CSS中，当两个或多个垂直相邻的块级元素（如）的margin相遇时，它们不会叠加成两个margin的和，而是会取两个margin中的较大值，这种现象被称为“margin重叠”（margin collapsing）。这种机制在布局中有时是有用的，但也可能导致不期望的布局效果。
css中的margin重叠（合并）问题
weixin_52036339的博客
09-10 1630
margin重叠问题及解决方案
2、margin重叠的情况和解决
abuanden的博客
02-25 4150
什么是margin重叠： 两个或多个盒子可能（相邻）也可能（嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。 有可能发生在父子元素，也有可能发生在兄弟元素之间 兄弟之间之间：兄弟元素之间是真正的margin重叠。 父子之间：父子之间实质为，当子元素的margin大于父元素时，会超过父元素的范围，显示出来就是那个大显哪个 所以： 实际上当子元素margin大于父元素margin的时候，其实是挤开了父元素的位置，导致看起来是重叠了。 发生在（垂直
margin叠加问题及解决办法
MisTTT的博客
09-01 1578
css外边距（margin）重叠问题两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠； 外边距重叠是指两个垂直相邻的块级元素，当上下两个边距相遇时，其外边距会产生重叠现象，且重叠后的外边距，等于其中较大者。 同理，如果一个无内容的空元素，其自身上下边距也会产生重叠。防止外边距重叠解决方案 外层元素padding代替 内层元素透明边框 border:1px solid trans
CSS的margin重叠问题
八百里风沙，一骑独过
01-18 728
1，在底层上的两个div： 图1-1 图1-2 测试代码如下：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type"
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值