内容简介:两个div,子元素div设置了margin-top后,发现并没有跟想象的一样,而发现父元素产生了间距。
<style type="text/css"> *{ margin: 0px; padding: 0px; } .show{ margin: 0px auto; width: 200px; height: 100px; background-color: #999999; } .show h2{ margin-top: 50px; cursor: pointer; } </style> <body> <div class="show"> <h2>crystal</h2> </div> </body>
两个div,子元素div设置了margin-top后,发现并没有跟想象的一样,而发现父元素产生了间距。
如上图。
原理:margin折叠
在css2.1盒模型仲规定的内容
因为嵌套也属于毗邻,所以在样式表中优先级更高子元素的margin会覆盖外层父元素定义的margin。
父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己 “领导”(父元素,祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级,假传圣旨,把自己的margin当领导的margin执行。
解决办法:
1、父元素或者子元素使用浮动或者绝对定位。
2、父级设置overflow:hidden
3、父级设置padding(破坏非空白的折叠条件)
4、父级设置border
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- CSS 技巧篇(六):display设置元素为行内元素时,元素之间存在间隙问题
- CSS 技巧篇(七):设置元素居中
- WPF从代码后面设置命名样式元素?
- 父元素设置overflow:scroll时vuedraggable组件出现奇怪效果的解决方案
- CSS 基础:块级元素、行内元素、替换元素、非替换元素
- 探究行内元素和块级元素
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Python机器学习
[美] Michael Bowles / 沙嬴、李鹏 / 人民邮电出版社 / 2016-12 / 69.00元
在学习和研究机器学习的时候,面临令人眼花缭乱的算法,机器学习新手往往会不知 所措。本书从算法和Python 语言实现的角度,帮助读者认识机器学习。 书专注于两类核心的“算法族”,即惩罚线性回归和集成方法,并通过代码实例来 展示所讨论的算法的使用原则。全书共分为7 章,详细讨论了预测模型的两类核心算法、预测模型的构建、惩罚线性回归和集成方法的具体应用和实现。 本书主要针对想提......一起来看看 《Python机器学习》 这本书的介绍吧!
HTML 编码/解码
HTML 编码/解码
RGB CMYK 转换工具
RGB CMYK 互转工具