子元素margin-top影响父标签原因
仅用来做笔记
来看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;
解决办法:
- 父级或子元素使用浮动或者绝对定位absolute
浮动或绝对定位不参与margin的折叠
父级overflow:hidden;
父级设置padding(破坏非空白的折叠条件)
父级设置border
原文:https://blog.csdn.net/sinat_27088253/article/details/52954688
子元素margin-top影响父标签原因相关推荐
- js父元素获取子元素img_css,前端_父标签div中包含一个子元素img标签,子元素div标签,为什么img要加上浮动,子元素div才会处于正常位置?,css,前端 - phpStudy...
父标签div中包含一个子元素img标签,子元素div标签,为什么img要加上浮动,子元素div才会处于正常位置? dom结构 如图img加上float 子元素div显示正常. 不加float div显 ...
- 子元素的margin-top影响父元素原因和解决办法
这个问题会出现在所有浏览器当中,原因是css2.1盒子模型中规定, In this specification, the expression collapsing margins means tha ...
- css笔记(选择器+清除浮动+定位+margin叠加以及子元素margin对父元素拖拽+羽化阴影)
##css(Cascading Style Sheet) 1.样式引入 行内样式:优点--效率高: 缺点--html与css代码耦合,复用性低内部样式表:优点--解决css和html代码耦合: 缺点- ...
- 布局时margin会影响父元素
布局时margin会影响父元素.md 在布局使用margin时 <div class="login-bg"><div class="login" ...
- 子元素宽度如何撑开父元素宽度
子元素宽度如何撑开父元素宽度 代码 效果如下 一个横向滚动栏,子元素高度会自动撑开父元素的高度,但是好像子元素宽度不能自动撑开父元素的宽度.这是我们需要使用css使子元素宽度可以自动撑开父元素宽度,避 ...
- 关于子元素的margin-top对父级容器无效
原理就是重新构建一个bfc盒子.如果不想看那么长,看下面这句话就好了. 刚开始我没看到这个总结时一直是使用自己摸索出来paddin-top解决,发现该方式并不好.亲测给父级加一个overflow不为v ...
- vue怎么调用子元素的方法_vue 父组件中调用子组件函数的方法
vue 父组件中调用子组件函数的方法 在父组件中调用子组件的方法: 1.给子组件定义一个ref属性.eg:ref="childItem" 2.在子组件的methods中声明一个函数 ...
- jquery 同级元素下的子元素_jq 获取所有父级元素及同级元素及子元素的方法(推荐)...
1.获取父级元素 $("#id").parent() 获取其父级元素 $("#id").parents() 获取其所有的祖先元素 $("#id&quo ...
- html 点击子元素,html如何点击子元素事件而不触发父元素的点击事件——阻止冒泡...
如果子元素和父元素都有点击事件,会出现点击事件冒泡的情况. 1.如何避免冒泡: html: 你好, 战无不胜 [注销] js: 方法1: UserLogout.οnclick=function (e) ...
最新文章
- 2021年诺贝尔经济学奖评述:解决重大社会问题的自然实验因果框架
- 超过Google,微信AI在NLP领域又获一项世界第一
- centos7修改密码
- JavaScript事件的捕获阶段(Capture phase)
- SAP云平台和SAP C4C之间的OAuth2.0配置
- Oracle Enterprises Manager 12C安装
- 《学习opencv》笔记——矩阵和图像处理——cvAnd、cvAndS、cvAvg and cvAvgSdv
- vue 页面跳转404_Vue 项目棘手问题的解决方案
- 第一章练习题三级菜单
- 使用monkey 前准备工作
- Oracle with..as使用方法
- PDF转码html有乱码,PDF转换成为Word内容出现乱码怎么办
- Matlab机器学习入门(一)
- 强大的 Apipost 要取代 Postman 了吗?
- unity材质球英文翻译
- 解决C语言运行窗口一闪而过问题
- 程序员的必备装备——为健康加油
- python中英文切换_python国际化(i18n)和中英文切换
- 高等数学上:函数的极限(重难点)
- java调用银联支付接口开发,银联在线Java接口开发
热门文章
- C++中const char*, string 与char*的转化
- 拉格朗日乘子法(Lagrange Multiplier)和KKT条件
- pyhton object is not subscriptable 解决
- 基于keras的深度学习基本概念讲解
- Jupyter安装r内核
- 青龙羊毛——B站天选
- 一般判五年几年能出来_判刑五年能减刑多少年
- 计算机绘图实训,计算机绘图实训-杜兰萍主编.pdf
- c语言 获得回车按键控制输入法,android调用输入软键盘回车键跟删除键
- IDEA如何解决'File is read-only'的问题