CSS-外边距合并塌陷问题

7次阅读
没有评论

共计 329 个字符,预计需要花费 1 分钟才能阅读完成。

相邻块元素垂直外边距合并

当上下相邻的两个块元素(兄弟关系)相遇时,如果上面的元素有下外边距 margin-bottom,下面的元素有上外边距 margin-top,则他们之间的垂直间距不是 margin-bottommargin-top 之和。而是取俩个值中的较大者这种现象被称为相邻块元素垂直外边距的合并

解决方案:尽量只给一个盒子添加 margin 值

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

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

解决方案

  1. 可以为父元素定义上边框 border: 1px solid taransparent;
  2. 可以为父元素定义上内边距 padding: 1px;
  3. 可以为父元素添加 overflow: hidden;
正文完
 0
qiaofugui.cn
版权声明:本站原创文章,由 qiaofugui.cn 于2024-05-20发表,共计329字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
验证码