子元素margin-top对父元素的影响

子元素设置margin-top后,父元素跟随下移的问题

<div>
 <p></p>
</div>

<style>
div{
  background: blue;
  width: 200px;
  height: 200px;

}
p{
  background: red;
  width: 50px;
  height: 50px;
  margin-top: 30px;
}
</style>


div没有margin-top:30px,但是页面上显示的结果确是像margin-top应用到了div上一般,div下移而p没有。

原因是当一个元素包含在另一个元素中时,假设没有内边距padding或边框border把外边距分隔开,它们的上和/或下外边距也会发生合并。请看下图


说白点就是:父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding,就会不断一层一层的找自己父元素的麻烦。


来看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分隔。


根据定义,我们发现我们的父div模块和子div模块之间没有非空内容、padding或者是border分割。所以此时这两个盒元素的margin合并共享之,子div的margin-top直接作用于合并的margin,将整个父div模块和子div模块下拉。因为两者同时下移,所以子div相对于父div的位置并未发生改变。


解决办法:

1. 父级或子元素使用浮动或者绝对定位absolute 浮动或绝对定位不参与margin的折叠

2. 父级overflow:hidden;

3. 父级设置padding(破坏非空白的折叠条件)

4. 父级设置border



声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。
真诚赞赏,手留余香
赞赏
随机推荐
Node.js 控制台进度条实现原理
CRSF 跨站脚本攻击已死,使用 Same-Site Cookies 来防范 CSRF
Node.js MySQL2 如何编写事务
Land APP 小程序
River 主题
CSS 媒体特性 prefers-color-scheme
Land 主题
使用 svg 作为背景图片