父元素与子元素之间的margin-top问题(css hack)

给子元素盒子一个垂直外边距 margin-top ,父元素盒子也会往下走margin-top的值,遇到此问题的朋友可以参考下本文

hack:

父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化。

如下图:

未标题-1.jpg

html代码:

<div class="box1"> 
    <div class="box2"></div> 
</div>

css样式:

.box1{height:200px;width:200px;background:gray;} 
.box2{height:100px;width:100px;background:gold;margin-top:50px;}

解决方法总结:

1、修改父元素的高度,增加 padding-top 样式模拟(padding-top:1px;常用)

2、为父元素添加 overflow:hidden;样式即可(完美)
3、为父元素或者子元素声明浮动(float:left;可用)
4、为父元素添加 border(border:1px solid transparent可用)

5、为父元素或者子元素声明绝对定位

6、为父元素添加 display:inline-block 属性

大家可以根据实际项目情况,来使用!


原文链接:HelloWeb前端网 » 父元素与子元素之间的margin-top问题(css hack) » 感谢您的浏览,希望能有所帮助。

欢迎您加入“Helloweb” 学习交流群:HelloWeb-学习交流群 196291215 共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!

喜欢 ()or分享