子元素margin-top为何会影响父元素?
https://blog.csdn.net/sinat_27088253/article/details/52954688
问题如下
一段很简单的代码:
css如下:
<style type="text/css">*{margin: 0px; padding: 0px; }.show{margin: 0px auto;width: 200px;height: 100px;background-color: #999999;}.show h2{margin-top: 50px;/*important*/cursor: pointer;}</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
html结构如下
<div class="show"><h2>crystal</h2></div>
- 1
- 2
- 3
当在<h2>crystal</h2>
没有设置margin-top
时,浏览器显示如预期
设置了margin-top
后出现了如下所示的现象:
我们并没有给外层的div设置margin-top,但是还是距离浏览器最顶部产生了50px的间距,查看这50px间距属于哪个元素,会发现外层div的margin依然是0 auto; 所以这个margin还是属于h2,为什么会这样?
来看css2.1盒模型中规定的内容:
In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin. 所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为:同级或者嵌套的盒元素,并且它们之间没有非空内容、Padding或Border分隔。
因为嵌套也属于毗邻,所以在样式表中优先级更高的 .show h2
的margin覆盖了之前外层div定义的margin,导致最终整个div产生10px的间距。
若给h2也添加一个class,并且在.show
之前定义,则最终结果如第一个图所示,最终margin显示为0;
解决办法:
1. 父级或子元素使用浮动或者绝对定位absolute
浮动或绝对定位不参与margin的折叠
2. 父级overflow:hidden;
3. 父级设置padding(破坏非空白的折叠条件)
4. 父级设置border
资料多数参考如下文章:http://www.cnblogs.com/hejia/archive/2013/05/26/3099697.html
--------------------- 作者:萤火虫塔莉 来源:CSDN 原文:https://blog.csdn.net/sinat_27088253/article/details/52954688?utm_source=copy 版权声明:本文为博主原创文章,转载请附上博文链接!
问题如下
一段很简单的代码:
css如下:
<style type="text/css">*{margin: 0px; padding: 0px; }.show{margin: 0px auto;width: 200px;height: 100px;background-color: #999999;}.show h2{margin-top: 50px;/*important*/cursor: pointer;}</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
html结构如下
<div class="show"><h2>crystal</h2></div>
- 1
- 2
- 3
当在<h2>crystal</h2>
没有设置margin-top
时,浏览器显示如预期
设置了margin-top
后出现了如下所示的现象:
我们并没有给外层的div设置margin-top,但是还是距离浏览器最顶部产生了50px的间距,查看这50px间距属于哪个元素,会发现外层div的margin依然是0 auto; 所以这个margin还是属于h2,为什么会这样?
来看css2.1盒模型中规定的内容:
In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin. 所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为:同级或者嵌套的盒元素,并且它们之间没有非空内容、Padding或Border分隔。
因为嵌套也属于毗邻,所以在样式表中优先级更高的 .show h2
的margin覆盖了之前外层div定义的margin,导致最终整个div产生10px的间距。
若给h2也添加一个class,并且在.show
之前定义,则最终结果如第一个图所示,最终margin显示为0;
解决办法:
1. 父级或子元素使用浮动或者绝对定位absolute
浮动或绝对定位不参与margin的折叠
2. 父级overflow:hidden;
3. 父级设置padding(破坏非空白的折叠条件)
4. 父级设置border
资料多数参考如下文章:http://www.cnblogs.com/hejia/archive/2013/05/26/3099697.html
--------------------- 作者:萤火虫塔莉 来源:CSDN 原文:https://blog.csdn.net/sinat_27088253/article/details/52954688?utm_source=copy 版权声明:本文为博主原创文章,转载请附上博文链接!
转载于:https://www.cnblogs.com/beimingbingpo/p/9765035.html
子元素margin-top为何会影响父元素?相关推荐
- 子元素应该margin-top为何会影响父元素【转】
这个问题困惑了很久,虽然没有大碍早就摸出来怎么搞定它,但始终不明白原因出在哪里,如果只是IE有问题我也不会太在意,可问题是所有上等浏览器都表现如此,这样叫我怎能安心?今天总算下狠心查出来怎么回事,居然 ...
- margin折叠-从子元素margin-top影响父元素引出的问题
正在做一个手机端电商项目,顶部导航栈的布局是一个div包含一个子div,如果给在正常文档流中的子div一个垂直margin-top,神奇的现象出现了,两父子元素的边距没变,但父div跟着一起往下走了! ...
- 布局时margin会影响父元素
布局时margin会影响父元素.md 在布局使用margin时 <div class="login-bg"><div class="login" ...
- 子元素增加margin-top会增加给父元素的问题
假设我们有如下代码 <div id="father" style="height:400px;width:400px;background:#e4393c;&quo ...
- 当子元素用position:relative;时,父元素的overflow:hidden;在ie中失效的解决办法
当子元素用position:relative;时,父元素的overflow:hidden;在ie中失效的解决办法: 给父元素也加上position:relative; 到现在也不知道为什么会出现这样的 ...
- 父元素设置了圆角,子元素没有设置圆角,子元素的直角会遮挡住父元素的圆角
父元素设置了圆角,子元素没有设置圆角,子元素的直角会遮挡住父元素的圆角 在开发时,我们经常会遇到给父元素设置了圆角,但子元素没有设置圆角,子元素的直角会遮挡住父元素的圆角的问题,如何解决这个问题呢,只 ...
- 子元素的margin-top会影响父元素
---恢复内容开始--- 之前在写项目的时候,发现原本想让父子元素之间加点边距,却让父元素产生了margin-top,于是百度之后发现了原因. 在css2.1盒模型中 In this specific ...
- 子元素的margin-top影响父元素原因和解决办法
这个问题会出现在所有浏览器当中,原因是css2.1盒子模型中规定, In this specification, the expression collapsing margins means tha ...
- [译] 关于CSS中的float和position (父容器div内的子元素div为float时,父元素无法撑开(或高度自适应)的解决方式)
测试案例:http://blog.csdn.net/goodshot/article/details/44408245 当构建页面排版时,有不同的方法可以使用.使用哪一种方法取决于具体页面的排版要求, ...
最新文章
- linux rm(remove) 命令详解
- JAVA WEB开发环境与搭建
- qpython编写爬虫_Python - 用 PyQt 写爬虫界面
- 安装Openface,实现人脸比对
- 家庭接入: dsl 电缆ftth 拨号和卫星_家庭宽带的路由器升级之路
- ABAP 调用第三方 API,遇到乱码该怎么办?
- linux的strace命令(详解)
- Java并发编程实战~ThreadLocal
- 编程算法 - 篱笆修理(Fence Repair) 代码(C)
- Spring Boot学习总结(13)——Spring Boot加载application.properties配置文件顺序规则
- TPC-C 中跑赢 Oracle 的 OceanBase,双 11 处理峰值达 6100 万次/秒!
- 建设自己拥有的B2C网站一般需要什么样的插件以及大体花费
- Anonymous推荐软件含有恶意***程序
- arcgis制作遥感影像标签(分割分类目标提取方向)
- 报表工具对比选型系列用例——排名及跨行组统计
- 用C++完成华氏温度换摄氏温度
- cim系统(cim系统包含哪些部分)
- ENIAC到EDVAC到Intel的思考
- VUEPC和手机屏幕适配
- txt文档在html中乱码怎么办,txt文件打开显示乱码怎么办?
热门文章
- Laplacian surface editing
- QT中PRO文件写法
- matlab查看RGB图像矩阵数值
- 【java】监听器、box和JFrame的应用
- rsyslog-mysql_04-Log rsyslog-mysql loganalyzer
- mysql.proc_修复./mysql/proc
- 判别器loss为0_scikitlearn—线性判别分析和二次判别分析
- 详细解读Youtube推荐算法
- 金蝶kis商贸采购单商品代码_金蝶KIS商贸高级版操作常见问题解答
- mysql 递归查找父节点_MySQL递归查询树状表的子节点、父节点具体实现