如何解决CSS外边距塌陷的问题

html-css013

如何解决CSS外边距塌陷的问题,第1张

首先我们先看出现外边距塌陷的三种情况： 1.当上下相邻的两个块级元素相遇，上面的元素有下边距margin-bottom，下面的元素有上边距margin-top，则它们之间的垂直距离取两个值中的较大者。 这时候两个盒子之间的垂直距离不是30px，而是20px。 解决方法： 尽量只给一个盒子添加margin值 2.对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者。 这时候两个盒子会发生合并，上外边距为20px。 解决办法： ①给父元素定义上边框 ②给父元素定义上内边距 ③给父元素添加 overflow：hidden；④添加浮动 ⑤添加绝对定位 3.如果存在一个空的块级元素， border、padding、inline content、height、min-height 都不存在，那么上下边距中间将没有任何阻隔，上下外边距将会合并。 可以理解成中间div宽度为0且上下边距融合，只取margin的最大值。

设置标签外边距为10px：margin:10px

设置标签内边距为10px：

padding:10px

也可以以四个值来分别设置标签上下左右的边距值，顺序为：上 右 下 左

margin:10px 20px 10px 20px

padding:10px 20px 10px 20px

还可以分开设置：

上：margin-top 、padding-top

右：margin-right 、padding-right

下：margin-bottom 、padding-bottom

左：margin-left 、 padding-left