CSS外边距合并塌陷问题

使用 margin定义块元素的垂直外边距时,可能会出现外边距的合井。

嵌套块元素垂直外边距的塌陷

对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。

如果有一个父盒子里面有一个子盒子,只有给子盒子添加margin-top值,就一定会出现外边距塌陷的问题!(父盒子会塌下来)

CSS外边距合并塌陷问题

解决方案:

  1. 可以为父元素定义上边框
  2. 可以为父元素定义上内边距
  3. 可以为父元素添加 overflow:hidden

还有其他方法,比如浮动、固定,绝对定位的盒子不会有塌陷问题。

版权声明:本文为本站原创文章,由37.2℃发表,转载请注明出处,保留一切权利!

转载请注明:转载于37.2度云笔记

发表评论

您的电子邮箱地址不会被公开。

微信
通知:站点改版中,敬请期待