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

若要前行,就得离开你现在停留的地方。要有对自己纯粹而坚韧的标准,才可以跟着直觉和信念走去。自卑心最伤害自己,是最大的障碍。有时候阳光很好,有时候阳光很暗,这就是生活。
hack
父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化。

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、为父元素或者子元素声明绝对定位

本文父元素与子元素之间的margin-top问题(css hack)到此结束。没有我为您掌灯,您在往返家的路上,会觉得难过吗?小编再次感谢大家对我们的支持!

您可能有感兴趣的文章
CSS 外边距(margin)重叠及防止方法

如何解决margin 外边距合并问题

详解css外边距折叠(margin collapsing)

margin-top塌陷问题的现象与如何解决的具体方法

CSS中margin和padding的区别浅析