【前端进阶学习】CSS中元素“内外边距”特殊情况处理办法

112 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第29天,点击查看活动详情

通常在制作网页中,为了更好控制网页中的元素,一般会清除元素的默认内外边距:

{
   padding:0;//清除内边距
   margin:0; //清除外边距
}

而除了清除默认内外边距的情况之外,CSS中元素内外边距还会出现一些特殊情况。今天让我们来看看~

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

情况1:相邻块元素垂直外边距的合并:

上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottommargin-top之和,而是两者中的较大者

例如:参考例子1 image.png

嵌套块元素垂直外边距的合并

情况2:嵌套块元素垂直外边距的合并

如果父元素没有上内边距及边框,则父元素的上外边距会与子元素的上外边距发生合并,合并后的外边距为两者中的较大者(即使父元素的上外边距为0,也会合并)

例如:参考例子2

image.png

可以参考这两个解决方法:

  • 可以为父元素定义1像素的上边框或上内边距
  • 可以为父元素添加overflow:hidden

写在最后

重新开始更文啦!最近忙了一段时间,终于继续可以学习!感谢大家的支持!我会继续努力坚持学习!养成了好习惯,每天必定会抽出时间多多少少学习前端知识~

以上习题&笔记从大佬们的论坛学习而来,特感谢大佬们的知识分享~ (学习技术知识,果然要看大佬们的技术博客,大家有好的推荐也欢迎指引我这个小白哈,感恩!)

附上学习链接,感谢这些大佬出题和解答: