CSS中的margin塌陷(collapse)
2016-12-07 12:43
169 查看
对于css中的margin塌陷问题,先看下面代码:
1.并排元素之间的margin问题:
html代码:
不同于其他属性,盒模型中垂直方向上的margin会在相遇是发生崩塌,也就是说当某个元素的底部margin与另一个元素的顶部margin相两者中值较大的会被保留下来。上面例子中只会保留margin-bottom属性,建议还是尽量统一使用同一margin属性。
2.父子级关系中的margin问题:
html代码:
css代码:
如果你认为运行结果是这样的话:
![](https://img-blog.csdn.net/20161207124930522?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamlhbl94aQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
那就错了,结果是这样的:
![](https://img-blog.csdn.net/20161207124952585?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamlhbl94aQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
这种情况下也是只会保留数值较大的margin属性,解决的方法是给父级元素加上overflow:hidden属性或者给父级元素加上padding属性,至少添加padding-top属性。
1.并排元素之间的margin问题:
html代码:
<div id="no1"></div> <div id="no2">Span2</div>css代码:
*{ margin:0px; padding:0px; } #no1{ background:#808000; width:300px; height:300px; margin-bottom:100px; } #no2{ background:#c0c0c0; width:150px; height:150px; margin-top:60px; }
不同于其他属性,盒模型中垂直方向上的margin会在相遇是发生崩塌,也就是说当某个元素的底部margin与另一个元素的顶部margin相两者中值较大的会被保留下来。上面例子中只会保留margin-bottom属性,建议还是尽量统一使用同一margin属性。
2.父子级关系中的margin问题:
html代码:
<div id="no1"> <div id="no2">Span2</div> </div>
css代码:
*{ margin:0px; padding:0px; } #no1{ background:#808000; width:300px; height:300px; margin-top:100px; margin-left: 30px; } #no2{ background:#c0c0c0; width:150px; height:150px; margin-top:60px; margin-left: 30px; }
如果你认为运行结果是这样的话:
那就错了,结果是这样的:
这种情况下也是只会保留数值较大的margin属性,解决的方法是给父级元素加上overflow:hidden属性或者给父级元素加上padding属性,至少添加padding-top属性。
相关文章推荐
- 问题与对策:CSS的margin塌陷(collapse)
- CSS的margin塌陷(collapse)
- 问题与对策:CSS的margin塌陷(collapse)
- CSS的margin塌陷(collapse)
- 问题与对策:CSS的margin塌陷(collapse)
- CSS的margin塌陷(collapse)
- CSS的margin塌陷(collapse)
- Margin垂直塌陷(collapse)问题
- css-margin collapse外边距折叠
- 由父子元素margin说开——外边距塌陷(margin-collapse)
- 由position属性引申的关于css的进阶讨论(包含块、BFC、margin collapse)
- 由父子元素margin说开——外边距塌陷(margin-collapse)
- margin塌陷(collapse)。水平方向会塌陷么?水平边距永远不会重合。
- margin塌陷(collapse)
- css之margin collapse(外边距叠加)
- CSS的margin塌陷
- Css中margin塌陷与合并问题与解决办法
- css margin collapse
- 关于css的margin塌陷现象
- CSS的margin塌陷