子元素margin-top，为什么对父元素也起作用？

最新推荐文章于 2025-01-22 16:18:12 发布
原创 最新推荐文章于 2025-01-22 16:18:12 发布 · 1.9k 阅读 · 2 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
学习心得

当前文章被收录于：

学习心得
61 篇文章 1 人学习
订阅专栏 查看详情
本文探讨了CSS中边距重叠的现象，特别是在父元素及其首个子元素间的上边距问题。文章解释了如何通过设置适当的上内边距或上边框来避免这种重叠现象。


边距重叠
hasLayout 会影响一个盒子和其子孙的边距重叠。根据规范，一个盒子如果没有上补白和上边框，那么它的上边距应该和其文档流中的第一个孩子元素的上边距重叠。


垂直外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，如果你读过了W3Shcool的CSS外边距合并的文章后，就很容易讨论这个问题了。这个问题发生的原因是根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

再说了白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己 “领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级，假传圣旨，把自己的margin当领导的margin执行。


解决方法就是：给父元素的padding-top或border-top设个值

标签
#web前端开发
python——模拟砍价
m0_62488776的博客
11-01 1928
类型：随机数。
【CAN总线测试】——使用VH6501 进行Busoff快慢恢复测试
LOVE135149的博客
11-11 5546
即在IDBase中填标准帧11位二进制ID，如果不满11位，高位补零，凑齐11位，并将下方CurrTriggerField设置干扰前一位AckSlot位，Triggeroffset设置为0。首先确认环境支持VN6501，6501硬件连接成功后，工程的小闪电是正常黄色状态，若是灰色证明缺少License，或者软件安装环境不正确。填写干扰报文ID、干扰位置 注意这里的干扰位置是实际干扰的前一位，TriggerOffset表示偏移量，可以干扰某个字节的具体位.找到并打开Panel后，开启工程，并且配置面板。
父元素高度塌陷和BFC
weixin_43269800的博客
01-02 663
父元素高度塌陷 在文档流中，父元素的高度默认是被子元素撑开的， 也就是子元素多高，父元素多高。子元素设置浮动或者设置绝对定位后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素高度塌陷。则父元素下面的元素会向上移动，导致布局混乱。 BFC 根据w3c的标准，在页面中元素都有一个隐含的属性叫做Block Formatting Context，简称BFC。该属性可以设置打开或...
Scratch全攻略：从入门到实践的编程之旅
最新发布
邓邓子的博客
01-22 1万+
Scratch 是一款由麻省理工学院（MIT）开发的图形化编程工具 ，它诞生的初衷是为了让编程教育更加普及，尤其是让孩子们能够轻松接触和学习编程。与传统的基于文本代码的编程方式不同，Scratch 通过将编程指令以图形化的积木形式呈现，极大地降低了编程的门槛，让编程变得如同搭积木一样简单有趣。
css 子级元素设置margin-top父级元素会跟着移动问题解决
weixin_67375532的博客
06-19 3174
关于嵌套盒子时css 子级元素设置margin-top父级元素会跟着移动的问题原因以及解决办法
子类元素设置margin-top，父类元素一起移动的原因以及解决思路
qq_60614034的博客
09-25 1897
初学者，不要骂
margin-top的时 父盒子跟着一块下来了
weixin_55209970的博客
08-07 1017
margin-top的时 父盒子跟着一块下来了
父子关系中，子元素margin-top会作用在父元素上面，如何解决？
2301_76892837的博客
03-07 863
父子关系中，子元素margin-top会作用在父元素上面，如何解决？
为子元素设置margin-top会作用在父元素上？
man_tutu的博客
03-15 7503
子元素设置margin-top为什么会作用在父元素上？ 如何解决子元素设置margin-top后使父元素受到影响？
子元素用margin-top 为什么反而作用在父元素上？
qq_38363738的博客
05-31 411
在这个说明中，“collapsing margins”（折叠margin）的意思是：2个或以上盒模型之间（关系可以是相邻或嵌套）相邻的margin属性（这之间不能有非空内容、padding区域、border边框 或使用清除分离方法）结合表示为一个单独的margin。 常用以下四种解决方法： 1、父元素设置 overflow:hidden; 2、父元素设置 padding-top:1px; 3、父元...
子元素设置margin-top,作用到了父元素
cherrylindan的博客
11-11 1336
html部分 <div class="parent"> <div class="child"></div> </div> css部分 .parent{ width: 500px; height: 600px; background: pink; } .child{ width: 200px; heihgt: 200px; background: green; margin-top: 20px; } 通过看效果可以看得出来， child设置
子元素的margin-top作用在父元素上
JJY的博客
10-03 706
这是因为css的外边距合并规则。两个相邻或嵌套的块级元素其外边距会合并为一个外边距，相邻的元素表现出两个外边距取大的那个，而嵌套的元素则表现为子元素设置margin-top，作用在父元素上。解决方案如下： 将父元素设置为BFC。 父元素设置padding-top，取代子元素设置margin-top，能达到同样的效果。 ...
给子元素加margin-top在父元素上自作用解决办法
Alive_tree的博客
04-23 410
我们在随便给一个div加margin-top的时候会给父元素起作用。类似的margin-left就不会。 栗子： html <div class=box> <div class="son"></div> </div> css .box{ width:200px; heigh...
[css] 解决问题---子元素设置margin-top，作用到父元素上
qq_14993591的博客
08-05 921
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
为什么子元素设置margin-top会作用在父元素上？
weixin_30372371的博客
11-15 200
原因在于：CSS 外边距合并 复现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> html * { ...
CSS设置子元素设置margin-top作用于父元素
sinat_35030910的博客
10-13 977
关于子元素的margin-top作用于父元素的原因解释
css 父子元素margin,CSS外边距合并：子元素的margin-top外边距被作用在父元素
weixin_35891744的博客
08-04 1153
[摘要]CSS外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。不理解此规范的话，会在前端布局中出现异常问题，本文深入浅出学习此规范，并提供解决办法。不得不说前端是一个水很深的行业，虽然起点低，稍微一学就能入门；但是很多实操型的知识如各种兼容性、规范性问题不在实际操作中遇到是无法深刻的理解的，笔者就遇到了CSS外边距合并这一看似非主流却很主流的问题。问题描述：笔者想得到一个两个内套的...
给子元素添加margin-top，作用到父元素上的问题
weixin_45663697的博客
09-27 206
在css盒模型中规定，两个或多个毗邻的普通流中的块级盒子，在垂直方向上的外边距会发生叠加，这种形成的外边距称之为外边距叠加（margin折叠）。 最终的margin值计算方法如下： 全部都为正值，取最大者； 不全是正值，则都取绝对值，然后用正值减去最大值； 没有正值，则都取绝对值，然后用0减去最大值。 毗邻的定义：同级或者嵌套的盒元素，并且他们之间没有padding，border，非空内容分隔。 当父元素的第一个子元素的margin-top，如果碰不到有效的padding，border和内容就.
子元素用margin-top 为什么反而作用在父元素上？对使用margin-top 的元素本身不起作用？...
weixin_30449453的博客
03-26 130
在这个说明中，“collapsing margins”（折叠margin）的意思是：2个或以上盒模型之间（关系可以是相邻或嵌套）相邻的margin属性（这之间不能有非空内容、padding区域、border边框或使用清除分离方法）结合表示为一个单独的margin。在css2.1中，水平的margin不会被折叠。垂直margin可能在一些盒模型中被折叠：1、在常规文档流中，2个或以上的块级盒模型相邻...
嵌套div引起的子元素margin-top不起作用
Laok0413的博客
02-18 547
最近发现一个很奇怪的问题，给子盒子div设置一个margin-top，但是却不起作用。 经过查阅，发现是该原因引起： 父元素的padding值为0，自动将子元素的margin-top提升到了父元素上，因此会表现为父元素的margin-top。 但是要注意，如果原先父盒子就有一个margin-top，那么此时子盒子的margin-top就不起作用了。 解决方法如下： 给父元素一个padding值，比如padding-top:1px，但是这样会撑大盒子，不建议 在父元素里面加一个overflow：h
解决子元素margin-top无效果的问题
weixin_44666471的博客
01-29 380
解决子元素margin-top无效果的问题： 1、给父元素设置overflow：hidden 2、为父元素设置边框 3、子元素设置定位属性position:relative,然后添加top属性
一个子元素在父元素中的水平垂直居中的实现方式
adminstate的博客
09-19 945
实现子元素在父元素中的水平垂直居中的实现方式
php-7.3.4安装包
包含：php-7.3.4-nts-Win32-VC15-x64.zipphp-7.3.4-nts-Win32-VC15-x86.zipphp-7.3.4-Win32-VC15-x64.zipphp-7.3.4-Win32-VC15-x86.zip
XILINX Spartan7_XC7S15 FPGA开发板硬件设计原理图.pdf
XILINX Spartan7_XC7S15 FPGA开发板硬件设计原理图，做为你的学习设计参考。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值