本文所分享的知识点是【父元素与子元素之间的margin-top问题(css hack)】，欢迎您喜欢我爱IT技术网所分享的教程、知识、经验或攻略，下面是详细的讲解。
父元素与子元素之间的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还有没有父级div继承子级div mar...
答：这位网友你好，margin不会继承，继承也是子元素继承父元素~你遇到的是Margin垂直外边距合并问题，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 垂直外边... >>详细
相关问题：子元素用margin-top 为什么反而作用在父元素上？对...
答：在这个说明中，“collapsing margins”（折叠margin）的意思是：2个或以上盒模型之间（关系可以是相邻或嵌套）相邻的margin属性（这之间不能有非空内容、padding区域、border边框 或使用清除分离方法）结合表示为一个单独的margin。 在css2.1中，... >>详细
相关问题：css 如何解决margin-top使父元素margin失效
答：怎么失效。你是说父子元素的margin合并吧。 子元素的margin-top如果是20px 父元素的是10px 那么合并之后的效果就是20px。 感觉好像父元素的margin-top=10px不起作用了 如果你想避免发生父子间的margin合并现象。 就必须要给父元素设置padding。... >>详细
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-