tip:为能更直观地学习,本文章已省略部分 css 样式代码。
我相信下面的情形大家在日常工作中常常碰到:在制作静态页面中,为了页面整体的协调与美观,我们想让子盒子 image-div 的上边沿距离父盒子 header-div 的上边沿有一定间距。
现页面效果:
目标页面效果:
为了达成上图的效果,我们首先就能想到给子盒子设置一个上外边距:
<style>
.image-div { /*子盒子*/
margin-top:25px;
}
</style>
让我们来看看结果如何呢?
结果和我们所预料的并不相同,子盒子 image-div 并没有和父盒子 header-div 的上边沿形成一定的间距。这两个盒子竟然一起往下移动了,多出了红框区域。
而这种现象,就是 CSS 中常遇到的“边距塌陷”问题中的一种。
边距塌陷
流内块级元素的 top 与 bottom 外边距有时会合并(塌陷)为单个外边距(合并后最大的外边距),这样的