块级元素垂直外边距合并问题详解

编程入门行业动态更新时间:2024-10-04 11:23:22

块级元素垂直<a href=https://www.elefans.com/category/jswz/34/1727714.html style= 外边距合并问题详解"/>

块级元素垂直外边距合并问题详解

块元素的垂直外边距合并问题

一、垂直外边距

1、使用margin属性定义块级元素的垂直外边距时，会出现外边距合并问题。

垂直外边距，指的就是margin-up上外边距和margin-bottom下外边距。

2、每个盒子都有上下左右四个不同方向的margin值，垂直外边距指的就是上下外边距。

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

1、设计两个上下相邻的div盒子模型，得到2个相邻的块级元素。代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {margin: 0;}.box1 {width: 200px;height: 200px;background-color: pink;}.box2 {width: 100px;height: 100px;background-color: orange;}</style>
</head><body><div class="box1"></div><div class="box2"></div>
</body></html>

2、生成如下两个相邻的块级元素：

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是，
取margin值最大的一组外间距作为两个块级元素之间的垂直外间距。
结合上图，代码中生成的相邻块元素的垂直外间距应该是取二者垂直外间距中最大的一个值，应该是20px.

3.详细讲解如下图：参考链接link.

4、解决方案
尽量只给一个盒子设置margin值

三、嵌套块级元素的垂直外间距合并（塌陷）

1、对于嵌套关系的两个块级元素，父元素如果没有 上内边距和边框，那么

父元素的上外边距就会和子元素的上外边距合并，就产生“子元素贴在父元素上面”的现象；
二者中哪个外边距margin-top值最大，就选合哪个作为合并后的外边距值；
父元素会塌陷外边距较大的值，也就是嵌套块元素塌陷。

2、生成一组嵌套关系的块级元素：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {margin: 0;}.father {width: 200px;height: 200px;background-color: pink;}.son {width: 100px;height: 100px;background-color: orange;</style>
</head><body><div class="father"><div class="son"></div></div>
</body></html>

生成结果如下：

（1）现在因为父元素太靠近页面边缘，那就通过设置父元素的margin-top值来调整一下，代码如下：

  <style>body {margin: 0;}.father {width: 200px;height: 150px;background-color: pink;margin-top: 20px;}.son {width: 100px;height: 100px;background-color: orange;</style>

可以看到整体都向下移动了一些：

（2）若要让子元素与父元素分开一些，不要紧贴着父元素，那么再设置一下子元素的外边距可以吗？

 <style>.father {width: 200px;height: 200px;background-color: pink;margin-top: 20px;}.son {width: 100px;height: 100px;background-color: orange;margin-top: 50px;}</style>

结果发现，父元素和子元素整体向下移动了很多，但是父元素子元素之间还是没有变化。这是因为，父元素连带着子元素，向margin-top值较大的一端塌陷。

3、参考文档：link.
参考上图，父元素会顺带着子元素，塌陷向外边距margin-top较大的一端,二者之间还是会合并在一起。

4、解决方案