css中子元素设置margin-top为什么影响了父元素
CSS 设置 为什么 元素 影响 Top margin
2023-09-27 14:21:47 时间
本文介绍了css中子元素设置margin-top为什么影响了父元素,分享给大家,具体如下:
1
2
<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之可收缩的底部边框
- HTML+CSS+JavaScript 实现图片3D展览
- 使用CSS设置背景图片,图片比较大,完全显示在一个DIV中
- JS设置CSS样式的几种方式
- CSS中背景设置——渐变色和放射渐变
- CSS中常用的10个文本样式属性——让文本设置再无难点
- css中5种属性选择器
- CSS字体设置
- css案例学习之div ul li a 实现导航效果
- jquery的css()函数同时设置多个css属性值
- 一文读懂css的相对定位【relative position】以及相对定位为什么要设置偏移量?
- CSS 设置网页中选中文字的背景色
- Gradify - 提取图片颜色,创建响应式的 CSS渐变
- CSS为英文和中文字体分别设置不同的字体
- 纯CSS气泡框实现方法探究
- jquery+css实现邮箱自动补全
- 史上最强大的40多个纯CSS绘制的图形
- css 怎么设置页面文本不被选中?
- DHTML【6】--CSS
- CSS设置 background-image透明度小技巧
- 精通CSS+DIV网页样式与布局--设置表单和表格