子div设置margin-top的时候 父的div也会跟着向下移动

最新推荐文章于 2023-10-28 22:55:21 发布
最新推荐文章于 2023-10-28 22:55:21 发布
阅读量320 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/twentyfour4ever/article/details/108179224
本文深入解析CSS盒模型中关于上边距、上补白及上边框的关系，阐述了如何通过设置父div的border、padding-top及overflow属性来避免子元素上边距与其重叠，同时区分了margin与padding的不同应用场景。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距
会和其内部文档流中的第一个子元素的上边距重叠

为父div设置border
在父div里面设置了padding-top
 overflow:hidden;

margin是用于隔开两个独立元素，
而padding用域隔开元素及其元素内部内容。其实子div相当于父div的内容，
为了使元素和内容隔开，可以使用padding
给第一个子元素加margin-top，父元素会向下移动的解决办法
以休伯利安的名义
01-19 899
4种方案方法一：给父元素加overflow:hidden方法二：给父元素加border:1px solid transparent方法三：父元素或子元素浮动方法四：父元素加padding-top:1px写在最后 给第一个子元素设置margin-top上外边距时，父元素总会跟着向下移动。 <div id="parent"> <div id="son"></div> </div> <style> body{ margin
《思考+总结》css遇到的问题一：（p元素）子盒子添加margin时导致（div）父盒子一起下移，与理想布局出现偏差。
qq_36417530的博客
02-22 896
出现的问题 在学习多个盒子之间的外边距影响时，了解到水平排放的盒子，水平间距时margin的累加；而垂直排放的盒子，垂直间距是合并的（取最大值）。 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒子</title> <link rel="stylesheet" type="text/css" href="hezi.css" />
子div的margin影响父div
热爱web前端开发
01-06 633
今天写div的时候，碰到了这个问题，当给子div加了margin以后，父div会莫名其妙的增加对于的margin。解决办法：给父div添加overflow:hidden。或者让子div浮动起来。都可以解决
子元素设置margin-top 父级元素掉下来的解决办法及原因
weixin_67530160的博客
10-28 609
解决办法，可以只给里它最近的父级元素添加 overflow: hidden; 发生原因，一个盒子如果没有上补白（指盒子中的内容与其上边框的距离 padding-top）和上边框(boder-top)，那么这个盒子的上边距会和文档流中的第一个子元素的上边距重叠。 这种情况是会层递的，如果父元素的第一个子元素的上边距margin-top碰不到有效的border或padding，它就会一直往上找，直到找到有boder-top或padding-top的祖先，对于那些没有找到的都会产生影响。
学习日记--子div设置margin-top 父div也跟着向下移动
轻风细雨_林木木
01-22 329
参考地址：https://blog.youkuaiyun.com/PigBiBiX/article/details/65934959 问题描述：子div设置margin-top的时候，父的div也会跟着向下移动。 原因：一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。 解决办法： 1.父类添加 border-t...
子div的margin属性影响到父div的定位
readonlyfile
10-26 1607
如下形式： .wrap{ margin: 0 auto ; background:#ccc ; } .child{ margin-top : 20px ; } 该div将影响父层div的margin属性 最后的结果是，child div 会使得 wrap div margin-top 20 px。 网上搜了下，解决办法是：在wrap中添加ove
解决给子元素设置margin-top后，会影响父元素一起向下移动；
liuwenjie_的博客
09-18 1456
给子元素设置margin-top后，会影响父元素一起向下移动； 代码片 .parent { height: 400px; width: 400px; background-color: blue; } .child { height: 100px; width: 100px; background-color: brown; /* margin-top:100px;*/
父元素与子元素之间的margin-top问题(css hack)
09-25
在这个例子中，子元素`.box2`的`margin-top`为50px，但实际观察到的是整个`.box1`元素向下移动了50px，而不是只有`.box2`。 ### 解决方法 1. **修改父元素的高度并增加`padding-top`**：给父元素添加一个微小的`...
css子元素margin-top
02-10
上述例子展示了子元素 `.box2` 的 `margin-top` 设置为 20 像素时，其效果实际上作用到了整个父容器 `.box` 上，导致两者共同向下偏移了 20 像素的距离。 #### 百分比形式的 `margin-top` 对于采用百分比定义的 `...
margin-top不要影响兄弟元素
最新发布
03-08
例如，如果有一个divA后面跟着divB，divB设置margin-top，这会让divB相对于divA向下移动。但是，如果divA和divB是兄弟关系，divB的margin-top实际上不会影响divA的位置，因为divA已经在前面渲染了。而divB的margin-...
父盒子跟随子盒子margin-top移动问题
weixin_45786214的博客
05-23 1366
问题： 当我们想给子元素设置margin-top时，发现子元素没有出现上外边距的效果，反而是父元素出现了上外边距的效果。 原因 根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。 说白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己父元素。直到找到父元素有有效的padding或border为止。 解决方法 1.给父盒子设
css-子div设置margin-top后，父div与子div一起下移
weixin_34238642的博客
11-19 319
根据海玉的博客 这个问题发生的原因是根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。 再说白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己“领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的 bord...
解决：子div设置margin-top使得父div也跟着向下移动
PigBiBiX的博客
03-25 1万+
之前在写网页的时候，发现一个小问题，就是子div设置margin-top的时候，父的div也会跟着向下移动。我用代码和图描述一下问题：   *{margin:0;padding:0;} .div1{background:green;height:100px;} .div2{background:darkblue;height:100px;} .subDiv{background:red;
为什么第一个子元素设置margin-top父元素会跟着移动（附解决方案）
热门推荐
一颗程序猿
09-22 1万+
问题： 有时当我们设置子元素的margin-top，但是却发现子元素没有出现上外边距的效果，反而是父元素出现了上外边距的效果。 原因： 边距重叠：一个盒子和其子孙的边距重叠。根据规范，一个盒子如果没有上补白和上边框，那么它的上边距应该和其文档流中的第一个孩子元素的上边距重叠。 解决方案 1、为父元素设置padding。 #father { width: 300px; height:...
解决子div设置margin-top使父div也跟着向下移动的问题
weixin_43176337的博客
09-29 840
直接看代码 html： <div class="main"> <div class="content"></div> </div> css body{ margin:0; padding:0; } .main{ wid...
如何解决css-子div设置margin-top后，父div与子div一起下移的bug?
xiaozhen0610的博客
07-29 537
根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。 这是规范引起的普遍问题。 只要给父盒子设置个有效的 border-top或者padding-top就可以有效的解决这个问题。但实际工作中可以并不想用border-top 或padding-top 对设计图造成影响。 想到overflow:hidden有解决溢出,坍塌,清除浮动的能力，所以overflow:hidden 似乎是最好的解决方式。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值