您当前的位置:首页 > 计算机 > 编程开发 > Html+Div+Css(前端)

子元素margin-top为何会对父元素造成影响?

时间:06-15来源:作者:点击数:

我们有时候发现,子div设置的margin-top对整个父div的位置造成了影响,对我们的布局造成了很大的困扰。

下面我们做一个测试:

css结构如下:

 .show{
 	margin: 0px auto;
        width: 200px;
        height: 100px;
        background-color: #999999;
      }
  .show h2{}

html结构如下:

<div class="show">
    <h2>div内元素</h2>
</div>
​

效果图:

当我们给h2的class属性增加:margin-top:50px时,发现整个父div块都被下拉了!

效果图:

此时我们并没有给外层的div设置margin-top,但是还是距离浏览器最顶部产生了50px的间距。但是当我们查看外层div时,会发现外层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分隔。

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

解决办法:

1. 父级或子元素使用浮动或者绝对定位absolute

浮动或绝对定位不参与margin的折叠

2. 父级overflow:hidden;

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

4. 父级设置borde

注:我暂时只发现margin-top会有这样的影响,如果还有其他的情况欢迎指正。

方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门