本文详细解释了CSS中常见的Margin叠加现象，即子元素的垂直Margin-top值影响父元素布局。文章提供了三种解决方案：1. 给父元素添加Padding而非子元素的Margin；2. 设置父元素的Overflow为Hidden；3. 为父元素添加透明边框。这些技巧有助于避免布局错误，保持网页设计的一致性和美观。
关于margin叠加问题
margin叠加是我们写界面经常遇见的问题
什么是margin叠加呢?
比如两个div互相嵌套,当然是两个正常文档流的div,也就是说没有加float,position的,
父元素在没有padding,border时,子元素的垂直margin-top值会叠加给父元素.
就像下面这样,我明明是给子元素加的margin-top:50px;但是父元素也被带下去了;
解决方法:
1.转换思路,不给子元素加margin,而是给父元素加padding.
2.给父元素加overflow:hidden;
3.给父元素加一个透明的边框;border:1px solid transparent;
希望对大家有用
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
