CSS的margin塌陷(collapse)
2017-04-28 20:57
148 查看
[code] [code]
[/code]
[/code]
如果您认为应该是这样的话:
那就错了。结果是这样的:
因为CSS中存在一个margin collapse,即边界塌陷或者说边界重叠。对于
上下两个并列的div块而言,上面div的margin-bottom和下面div的margin-
top会塌陷,也就是会取上下两者margin里最大值作为显示值,所以从这个
意义上说:CSS及浏览器的设计者们希望我们在布局时,如果遇到上下两个
并排内容块的安排,最好只设置其中每个块上或下margin的一处即可。w3s
chool也规定:当两个垂直外边距相遇时,它们将形成一个外边距。合并后
的外边距的高度等于两个发生合并的外边距的高度中的较大者。
但对于父块DIV内含子块DIV的情况,就会按另一条CSS惯例来解释了,那
就是:对于有块级子元素的元素计算高度的方式,如果元素没有垂直边框和填
充,那其高度就是其子元素顶部和底部边框边缘之间的距离。所以对于代码:
[code] [code]
[/code]
[/code]
father这个div的高度为0,因为里面没有能够撑开div的内容。如果变为:
[code] [code]
[/code]
[/code]
则高度就是文字的高度,因为此时文字在撑着这个DIV。
话说回来,一个DIV和它的子DIV特别重视垂直边框或填充,也就好像是,
一口锅,里面放个盆,能不能扣住里面的盆,主要看锅盖了,垂直边框或填
充就是这个“锅盖”。于是解决的方式至少有以下三种:
1、需要给父div设置边框,当然可以设置边框为透明:
[code] [code]
[/code]
[/code]
2、[b]为父DIV添加padding,或者至少添加padding-top;[/b]
[code] [code]
[/code]
[/code]
3、为父DIV添加overflow:hidden
[code] [code]
[/code]
[/code]
相关文章推荐
- CSS的margin塌陷(collapse)
- CSS中的margin塌陷(collapse)
- 问题与对策:CSS的margin塌陷(collapse)
- 问题与对策:CSS的margin塌陷(collapse)
- CSS的margin塌陷(collapse)
- 问题与对策:CSS的margin塌陷(collapse)
- CSS的margin塌陷(collapse)
- CSS的margin塌陷
- 关于css的margin塌陷现象
- css之margin collapse(外边距叠加)
- CSS中,margin-top塌陷问题的解决
- css margin collapse
- css margin塌陷问题
- css的margin塌陷问题(转载)
- CSS的margin塌陷
- css中常见margin塌陷问题之解决办法
- CSS中margin的塌陷现象
- css-margin collapse外边距折叠
- 由父子元素margin说开——外边距塌陷(margin-collapse)
- 由position属性引申的关于css的进阶讨论(包含块、BFC、margin collapse)