子元素margin影响父元素

最新推荐文章于 2026-04-02 00:30:00 发布

原创最新推荐文章于 2026-04-02 00:30:00 发布 · 1.2k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

本文深入探讨了CSS中子元素的margin属性如何影响其父元素，导致所谓的“margin穿透”现象，并提供了两种有效解决方法：一是通过设置父元素的overflow或padding/border/margin属性；二是利用子元素的padding来替代margin，达到相同的视觉效果。

bug分析

浏览器内核在渲染margin时会在捕获到子元素并对子元素的模型渲染完毕之后，开始向父级寻找父级的边界

父元素的边界由父元素的边界属性决定，如果父级没有边界，父级就会受到子元素的margin影响，导致父级产生同样的margin

什么是边距属性

盒子模型的border padding margin overflow 为盒子模型的边距属性

解决方法一

为父级设置overflow或者padding border margin

解决方法二

用子级的padding实现相同的视觉效果，取消margin

CSS使用优先级

能用padding 不用margin

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

转型AI的宏达

关注关注

0
点赞
踩
2

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

【抖音】a_bogus参数逆向分析

qq_44990881的博客

11-01

2970

点击——展开xxx条回复﹀就会出现。可以看到这个栈是有请求相关的数据的。所以就是在bdms.js里面生成的。

0 条评论

写评论

HWDB1.1数据集处理全攻略：从gnt文件到PNG图片的完整转换教程

2w3e4r5t6y的博客

03-03

609

本文提供了HWDB1.1数据集处理的完整教程，详细解析了gnt二进制文件格式，并给出了从文件解析、标签映射到批量转换为PNG图片的Python脚本。教程涵盖了环境准备、跨平台解压方案，以及为PyTorch等深度学习框架准备数据的最佳实践，是进行手写汉字识别研究不可或缺的实用指南。

子元素的margin-top为什么会影响父元素

apeiziwei的博客

06-08

1786

子元素的margin-top影响父元素的原因及解决方案

大数据在电力行业的应用案例解析-【电力技术】（九）大数据在电力储能运维中的深度应用（含故障预测代码）

最新发布

getusushu的博客

04-02

大数据技术为电力储能运维提供了“精准化、智能化、高效化”的解决方案，破解了传统运维的核心痛点，实现了储能系统从“被动抢修”到“主动运维”的转型，为新型电力系统建设提供了重要支撑。当前，随着储能产业的快速发展，大数据与储能运维的融合将更加深入，未来将结合人工智能、物联网、区块链等技术，实现储能运维的全流程智能化——从设备故障的提前预警，到寿命的精准预测，再到运维策略的自动优化、调度协同的实时响应，进一步提升储能系统的安全性、经济性与可靠性。

css中子元素设置margin-top为什么影响了父元素

无止境学的博客

05-11

798

这篇文章主要介绍了css中子元素设置margin-top为什么影响了父元素，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

子元素设置margin会影响父元素问题

ice-bear

01-21

2312

原因及解决

子元素的margin影响到父元素的大小

大连云鹏

03-04

828

总体来讲，这个问题是垂直外边距合并问题。也就是一个div，作为一个元素的第一个子集元素情况下，在设置了外边距之后，会与父级的div元素在某种情况下进行合并，那么在什么情况下呢第一个元素的上外边距会去查找父级的border或者padding，如果没找到，就会向外找margin，如果找到margin，相邻的两个margin会进行合并，这也就是垂直外边距合并。也就是说没有找到边界，就...

子元素margin影响父元素如何解决

weixin_45357661的博客

03-28

329

这是个常见问题，而且只在标准浏览器下 (FirfFox、Chrome、Opera、Sarfi)产生问题，IE下反而表现良好。问题描述：有些情况下，我们设定父元素下的子元素margin值时，父元素会被影响。解决方案：对父元素增加CSS代码。

子元素设定margin值会影响父元素

ddny090930的博客

08-15

454

有些情况下，我们设定父元素下的子元素margin值时，父元素会被影响。这是个常见问题，而且只在标准浏览器下 (FirfFox、Chrome、Opera、Sarfi)产生问题，IE下反而表现良好。例如： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta cha...

子元素margin-top为何会对父元素造成影响?

qq_36470686的博客

09-27

5486

我们有时候发现，子div设置的margin-top对整个父div的位置造成了影响，对我们的布局造成了很大的困扰。下面我们做一个测试： css结构如下： .show{ margin: 0px auto; width: 200px; height: 100px; background-color: #999999; } ....

子元素的垂直margin值对父元素的影响

love2016hy的博客

06-02

636

首先得说一下 margin折叠所谓margin折叠，即相邻的不同margin值有可能会被折叠成同一个margin值。看清楚哦，只是有可能会。至于哪些是相邻元素？哪些又会存在折叠？这个链接https://blog.coding.net/blog/css-margin里阐述很全面。这里只分析子元素的垂直margin值对父元素的影响（HTML结构：灰色父块，红色子块，绿色子块，白色父块，黄色子

子元素的margin-top为什么会影响父元素？

苏苏就是小苏苏的博客

02-18

3256

1.两个元素，当你为子元素设置margin-top的时候，你会发现什么呢？ 2.解决方法 父元素设置 1- overflow: hidden 2- display: inline-block;或者float布局 3- border: 1px solid transparent; 4- position: absolute

关于子元素的margin-top影响父元素

焕野,唤野

03-05

414

我的第一篇博文，感觉不开个博客不行了，一是记录自己的学习历程，而是可以当做笔记来看，之前让我遇到了一个头疼的问题，现在干脆写出来以免忘了！接下来看看这个问题“子元素为什么设置margin会影响父元素的margin” 我加点文字在这里先把html,body,div的默认margin，padding设为0,。再给父元素设置宽高，子元素设置宽高。

给子元素添加margin-top不生效，父元素受到影响的解决办法

weixin_45393280的博客

04-14

919

今天写css的时候遇到一个问题，当给子元素添加margin-top的时候，父元素也被添加上了，严重影响页面布局。例子代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=de...

关于子元素margin-top影响父元素位置问题

qq_39755601的博客

01-16

915

之前写项目的时候喜欢用border,所以一直都没有遇到过这个问题,如果父元素没有float属性没有,也没有border属性的时候,子元素的margin-top会影响到父元素,在css2.1中有规定所有毗邻的两个或多个盒元素的margin-top会共享使用,因为嵌套也属于毗邻,所以才会有子元素的margin-top影响了父元素的现象解决这个问题我知道的有如下方法: 1.给父元素添加一个bord

解决给子元素设置margin-top后，会影响父元素一起向下移动；

liuwenjie_的博客

09-18

1513

给子元素设置margin-top后，会影响父元素一起向下移动；代码片 .parent { height: 400px; width: 400px; background-color: blue; } .child { height: 100px; width: 100px; background-color: brown; /* margin-top:100px;*/

margin：子元素添加margin-top影响父元素；上下盒子添加外边距重叠问题

美人如玉，剑气如虹

09-03

8306

这几天看margin看的有点晕，写篇博客细细梳理一下 margin 的一些问题。主要是两个方面的，1. 子元素添加 margin-top 父元素也会下移；2.当兄弟关系的两个盒子同时添加外边距时，相邻的外边距会重叠。 1.子元素添加 margin-top ，父元素也会受影响，也像添加了 margin-top一样下移。 ...

CSSmargin击穿问题（子元素margin-top会影响父元素）

sq-web

05-06

700

最近写一个H5页面的时候发现了这个被忽视的问题，一时没想到什么原因，搜了半天，记录一下，方便他人踩坑。唉，有些东西不用就忘。一、问题描述 <div class="container"> <div class="children">子元素</div> </div> .container { background-color: r...

子元素设置margin-top，父元素也受影响