子div块中设置margin-top时影响父div块位置的解决办法及其原因

最新推荐文章于 2020-11-29 17:55:06 发布
原创 最新推荐文章于 2020-11-29 17:55:06 发布 · 677 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#子div #父div #前端

本文提供了解决在父DIV块中使用margin-top导致的样式冲突问题的两种方法：通过在父DIV块中添加overflow:hidden;或在子DIV块中使用padding-top替代margin-top。同时介绍了bfc（块级格式化上下文）的概念及其如何触发解决该问题。
解决办法①:
若子DIV块中使用margin-top,则在父DIV块中添加：overflow:hidden;
解决办法②:

在子DIV块中用padding-top代替margin-top。

有个叫 bfc 的东西 叫 块级元素格式化上下文 overflow hidden 或者描边可以触发 bfc 就可以解决这个问题

第一个子元素在未超过父元素高度的情况下设置margin-top导致出现竖向滚动条的问题
想搞全栈的前端
05-08 1582
分析问题 在页面布局时，我们经常会设置html,body的height为100%，让处于最外面的父级元素刚好充满整个屏幕高度，但是，如果此时body下面第一个子元素，刚好设置了margin-top的值，你会发现页面出现了竖向滚动条，问题是这个子元素并没有超过父容器高度也导致出现竖向滚动条，似乎这个margin-top是添加到了父容器上。 例子：假如一个页面有一个列表，第一个子元素需要保持和最顶部有一些上边距，于是你设置了这个子元素margin-top:20px，这个子元素的高度并没有超过父元素的高度，但是整
clear:both后margin-top不起作用其他左右下都起作用
09-25
在BFC中，元素的顶部外边距不会与其包含块或者浮动元素的底部外边距发生合并，这就是为什么`margin-top`看起来没有影响到第二个`div`的垂直位置。相反，`margin-bottom`和`margin-right`依然按照常规方式起作用，...
子DIV块中设置margin-top时影响父DIV块位置的解决办法
a393931948的专栏
10-08 9635
解决办法1: 若子DIV块中使用margin-top,则在父DIV块中添加：overflow:hidden; 解决办法2: 在子DIV块中用padding-top代替margin-top
CSS小技巧-为内盒子添加margin-top时，会带着父盒子一起下来，如何解决？
weixin_30256901的博客
03-04 546
1、为父盒子添加一个padding 2、为父盒子添加一个border 3、为父盒子添加一个overflow:hidden 转载于:https://www.cnblogs.com/wk1102/p/6501641.html
给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值的解决办法
houlai_houlai的博客
01-08 321
转自：http://blog.youkuaiyun.com/oiu1010110/article/details/53192048
子元素magrin-top影响父元素的magrin-top
Fifty-three的博客
05-06 267
原因： 父元素没有设置宽高，容易受到子元素的影响 解决方案： 1.尽量给父元素设置padding，也不要给子元素设置margin 2.给父元素设置宽高（放大缩小时容易变形） ...
div标签中的元素margin-top失效的解决方法
09-28
总结来说，div标签中的元素margin-top失效是块格式化上下文影响下的一个常见问题。针对这种情况，开发者可以尝试使用overflow:hidden来解决，同时注意其他可选方案，如添加padding或border、使用绝对定位或利用CSS的...
父元素与子元素之间的margin-top问题(css hack)
01-19
hack： 父元素的盒子包含一个子元素盒子，给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值，而子元素和父元素的边距则没有发生变化。 html代码： 复制代码代码如下: <div class=”box1″...
margin：子元素添加margin-top影响父元素；上下盒子添加外边距重叠问题
美人如玉，剑气如虹
09-03 8204
这几天看margin看的有点晕，写篇博客细细梳理一下 margin 的一些问题。主要是两个方面的，1. 子元素添加 margin-top 父元素也会下移；2.当兄弟关系的两个盒子同时添加外边距时，相邻的外边距会重叠。 1.子元素添加 margin-top ，父元素也会受影响，也像添加了 margin-top一样下移。 ...
子DIV块中设置margin-top时影响父DIV块位置问题
热门推荐
hahhahahaa的博客
06-13 1万+
相信很多前端同学在做页面开发的时候都遇到过这样的问题。给一个div内部的div设置一个margin-top，结果它的父级跟着它一起下移了。如下面的代码.a { width:100px; height:100px; } .b { width:50px; height:50px; margin-top:10px; } &lt;div class="a"&gt;...
css布局时子div的margin-top影响父div的margin-top的处理
硬币2014
01-16 401
样式如下 <style> .box1 { width: 300px; height: 300px; background-color:sienna; } .box2{ width: 100px; height: 100p...
关于父子div使用margin-top的问题
qq_34239734的博客
05-19 537
我们在进行页面开发时，不可避免的会使用到margin这个属性 在子级div里面使用margin-top属性时，父级div也会随之生效margin-top 所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔。 所以可知 在子级div设置margin属性时，在父级div没有找到非空内容、padding或border，所以又向上寻找，导致父级div得margin也生效了。 解决办法 父级
margin-top导致子标签绑架父标签问题
pengzheng1985的专栏
06-21 2448
现象： 当两个空的块级元素嵌套时，如果内部的块设置有margin-top属性，而且父元素没有下边解决方法所述的特征，那么内部块的margin-top属性会绑架父元素（即将margin-top传递凌驾给了父元素）。 就好比一个小兵，看到上级有漏洞，就假传圣旨，利用漏洞扩张自己的权利。只要设置父元素的border（栅栏）或者padding（隔离墙），就能管住这个调皮的下属。 #parren
子盒子设置margin值时影响父盒子的解决方法
document_write的博客
08-17 1135
方法一：为父元素设置border 方法二：为父元素添加overflow：hidden；样式 方法三：为父元素或者子元素声明浮动 方法四：为父元素或者子元素声明绝对定位 ...
margin知识总结（子元素margin-top与父元素一起下移动）
qq_43712187的博客
11-29 2028
一、margin属性 1、首先它是盒模型得外边距属性，有上下左右 2、左右主要是使得不同盒子之间留有一定得空隙使得更美观 二、margin得应用 2.1、在同级元素之间得应用 两个水平方向的盒子相遇，那么最终两者之间的距离为左边盒子的右外边距和右边盒子的做外边距之和。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title<
给子盒子加margin-top会把父盒子带下来，造成外边距塌陷的解决办法
weixin_40551017的博客
02-28 2430
.father{ width: 300px; height: 300px; background-color: pink; } .son{ width: 200px; height: 200px; background-color: orange; margin-top:10px } 给子盒子添加margin-top:10px属性后，会作用于父盒子，连同父...
div中的div设置margin-top为负数并没有导致内部div上移
最新发布
05-11
### 子元素设置负 `margin-top` 不上移的原因分析 在 CSS 布局中，子元素的负 `margin-top` 并不总是能够使该子元素相对于其正常位置向上移动。这种现象可以通过盒模型的行为以及外边距折叠机制来解释。 #### 外边...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值