外边距塌陷的问题

2023-12-26 19:08

文章标签 问题外边塌陷

本文主要是介绍外边距塌陷的问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

外边距塌陷的设计初衷：
如下图所示的一段话，使用margin-top: 10px让每段话之间有10px的空隙，但是底部与图片还没有空隙，从而又额外设置margin-bottom:10px, 让文字和图片有10px的空隙，而不会因为上下外边距而有两个10px出现，每个空隙之间的宽度都是相等的，这是css设计者的初衷。
外边距塌陷是为了解决段落平之间垂直方向的空隙，因此只会发生在垂直方向，而不是水平方向。
块级元素，不是行内元素，也不是行内块级元素。
外边距的计算依据：
a. 正数 && 正数最大的数
b. 负数 && 负数绝对值最大的数
c. 正数 && 负数取两个数相加的和
相邻：
如下图所示：根据外边距的计算原则:
A元素的下边距为20px, B元素的上边距为30px，取最大值为30px。

这个时候把我们把A元素的margin-top设置为-100px，则A元素和B元素的顶部都合在一起了。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.divA {height: 100px;width: 200px;background-color: #5c94bd;margin-bottom: -100px;}.divB {height: 50px;width: 200px;background-color: #eccd8f;}</style>
</head>
<body>
<div class="divA"></div>
<div class="divB"></div></body>
</html>

在这里插入图片描述
A元素的底部设置为-100px，取绝对值较大者。因此A和B的上边缘合并在一起。除非margin-top: -150px, 这也是设置两个元素顶边对齐的一种方法。

如果把B元素的margin设置为-100px，则B元素则会和A元素进行顶对齐，
在这里插入图片描述
一正一负，可以做垂直居中，A元素和B元素的外边距之和为-60px，A元素的底外边距为-60px，B元素的定外边距也为-60px，从而实现了垂直居中。

结果并不是我们想要的，反而是A元素偏移了我们C元素20px，而B元素还是和A元素顶部对齐，计算外边距的方法，这里实际上是A和B共享了垂直方向的外边距：20px > 10px；那么取20px这个值，那么子元素的外边距实际上是在A元素的外围，因为这里是普通流，和A元素的外边距重叠着，只是我们看不到而已。因此我们对A和B同时设置外边距就会让他们同时往下移，如何去解决我们不想要的外边距塌陷问题。

给A元素设置position: relative; 给B元素设置position: absolute, margin-top: 20px; 这个时候B元素就会相对于A元素进行偏移20px。也不会影响A元素和C元素的空隙。
在这里插入图片描述

前面说过行内块级元素不会出现外边距塌陷。我们为B元素设置:
display: inline-block; margin-top: 20px; 这时A和B的外边距就可以分开计算了。但是记住这个方法，要为行内块级元素设置宽和高。

在这里插入图片描述
相对定位：

相对定位是相对于原来的位置做偏移，但是原来的位置是存在的。设置外边距还是会出现外边距塌陷的。

还一种定位的方式就是浮动，
要么设置左边要么设置右边，如果要居中的话这种方法可能会比较麻烦。
在这里插入图片描述
除了定位，还可以用BFC的方法，创建了BFC的元素不会和他的子元素发生外边距叠加的情况。
overflow: hidden会帮助我们创建BFC，不过这个方法有可能会帮助我们隐藏掉溢出的部分，可能会比较局限。

外边距对对应的是内边距：
直接在父元素添加顶部内边距，也可以解决问题。
在这里插入图片描述
要注意，父元素padding子元素不要margin，设置了padding就不会有子元素叠加的情况，如何这个时候在为B(子元素)设置顶外边距的话，
那么B离A元素的顶部的距离实际上是B元素外边距加上A元素内边距，父元素内边距不让里面东西，子元素外边距老老实实在父元素显示。