HTML及CSS学习笔记 10 - 边距合并

最新推荐文章于 2022-10-17 15:41:24 发布

chodenke

最新推荐文章于 2022-10-17 15:41:24 发布

阅读量783

点赞数

分类专栏： HTML及CSS学习笔记文章标签： HTML margin合并边距合并

本文链接：https://blog.youkuaiyun.com/cgl125167016/article/details/90114479

版权

HTML及CSS学习笔记专栏收录该内容

16 篇文章

订阅专栏

边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它比较容易造成混淆。本文主要就边距合并问题进行介绍

文章目录

一、边距合并

一、边距合并

1、什么是边距合并

边距合并指的是，在一个独立的布局环境中，当垂直方向上的边距相遇时，它们将形成一个边距。合并后边距的值等于发生合并的边距值中较大的一个。而不同的独立布局环境之间则不会发生这种现象。
关于独立的布局环境，更加详细的介绍请在网上搜索 “BFC 块级格式化上下文（Block Formatting Contexts ）”进行查阅。

2、一些边距合并的案例

2.1、案例1 - 正常文档流中的同级元素边距合并

案例1演示正常文档流中同级的块级元素，上下边距合并的情况。
下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 上下边距合并 </title>
    <style type="text/css">
      * {margin: 0; border: 0; padding: 0;}
      .d1, .d2 {height: 100px; width: 100px; margin-top: 10px; margin-bottom: 20px;}
      .d1 {background-color: lightsalmon;}
      .d2 {background-color: lightgreen;}
    </style>
  </head>
  <body>
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d1"></div>
  </body>
</html>

页面浏览效果：
上下边距合并
说明：

正常的文档流构成一个独立的布局环境，其中同级的几个块级元素，当一个元素出现在另一个元素上面，上下边距发生合并。如下：

2.2、案例2 - 父子关系的元素边距合并

案例2演示当一个元素包含在另一个元素中，并且它们垂直方向的边距相遇（没有填充或边框把边距分隔开）时，它们的边距发生合并的情况。
下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 父子关系的块级元素边距合并 </title>
    <style type="text/css">
      * {margin: 0; border: 0; padding: 0;}
      .d-parent {height: 150px; width: 150px; margin-top: 20px; background-color: lightgreen;}
      .d-child {height: 100px; width: 100px; margin-top: 10px; background-color: lightsalmon;}
    </style>
  </head>
  <body>
    <div class="d-parent">
      <div class="d-child"></div>
    </div>
  </body>
</html>

页面浏览效果：
父子关系的块级元素边距合并
说明：

父子关系的块级元素，垂直方向的边距相遇时，发生合并。如下：

2.3、案例3 - 同一元素上下边距合并

案例3演示同一元素的上边距和下边距合并的情况。
下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 同一元素上下边距合并 </title>
    <style type="text/css">
      * {margin: 0; border: 0; padding: 0;}
      .d1 {height: 100px; width: 100px; background-color: lightsalmon;}
      .d2 {margin-top: 20px; margin-bottom: 20px;}
      .d3 {height: 100px; width: 100px; background-color: lightgreen;}
    </style>
  </head>
  <body>
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
  </body>
</html>

页面浏览效果：
同一元素上下边距合并
说明：

一个空元素，它有上下边距，但是没有边框和填充。在这种情况下，上边距与下边距就碰到了一起，它们会发生合并。如下：

2.4、案例4 - 浮动元素内部边距合并

案例4演示在一个浮动元素内部，同级的块级元素上下边距合并的情况。
下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 浮动元素内上下边距合并 </title>
    <style type="text/css">
      * {margin: 0; border: 0; padding: 0;}
      .d-parent {width: 100px; background-color: lightgreen; float: left;}
      .d-child {height: 100px; width: 100px; margin-top: 10px; margin-bottom: 20px; background-color: lightsalmon;}
    </style>
  </head>
  <body>
    <div class="d-parent">
      <div class="d-child"></div>
      <div class="d-child"></div>
    </div>
  </body>
</html>

页面浏览效果：
浮动元素内部垂直边距合并
说明：

本例中，虽然父元素是一个浮动元素，脱离了正常的文档流，但浮动元素内部仍然是一个独立的布局环境。上下边距合并仍然会发生。但是，子元素已经不再会与浮动的父元素发生边距合并。

2.5、案例5 - 绝对定位元素内部边距合并

案例5演示在一个绝对定位元素内部，同级的块级元素上下边距合并的情况。
下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 绝对定位元素内上下边距合并 </title>
    <style type="text/css">
      * {margin: 0; border: 0; padding: 0;}
      .d-parent {width: 100px; background-color: lightgreen; position: absolute;}
      .d-child {height: 100px; width: 100px; margin-top: 10px; margin-bottom: 20px; background-color: lightsalmon;}
    </style>
  </head>
  <body>
    <div class="d-parent">
      <div class="d-child"></div>
      <div class="d-child"></div>
    </div>
  </body>
</html>

页面浏览效果同上一个案例，这里不再展示。
说明：

本例中，虽然父元素是一个绝对定位元素，脱离了正常的文档流，但绝对定位元素内部仍然是一个独立的布局环境。上下边距合并仍然会发生。但是，子元素已经不再会与绝对定位的父元素发生边距合并。
固定定位元素具有同样的特性。

2.6、案例6 - 添加overflow属性的元素内部边距合并

CSS中overflow属性用来规定当内容溢出元素框时的行为。常见属性及值如下：

属性及值	说明
`overflow: visible;`	默认值。内容不会被修剪，会呈现在元素框之外
`overflow: hidden;`	内容会被修剪，并且其余内容是不可见的
`overflow: scroll;`	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
`overflow: auto;`	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

案例6演示在一个设置了样式属性overflow: hidden;的元素内部，同级的块级元素上下边距合并的情况。
下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> "overflow: hidden;"的元素内上下边距合并 </title>
    <style type="text/css">
      * {margin: 0; border: 0; padding: 0;}
      .d-parent {width: 100px; background-color: lightgreen; overflow: hidden;}
      .d-child {height: 100px; width: 100px; margin-top: 10px; margin-bottom: 20px; background-color: lightsalmon;}
    </style>
  </head>
  <body>
    <div class="d-parent">
      <div class="d-child"></div>
      <div class="d-child"></div>
    </div>
  </body>
</html>

页面浏览效果同上一个案例，这里不再展示。
说明：

本例中，父元素设置了样式属性overflow: hidden;，该元素的内部形成一个独立的布局环境。故子元素之间上下边距合并仍然会发生。但是，子元素已经不再会与设置了样式属性overflow: hidden;的父元素发生边距合并。
事实上，当overflow属性的值不为visible时，元素都具有该特性。

2.7、案例7 - 浮动元素之间不再发生边距合并

案例7演示同级的浮动元素垂直排列时的情况。
下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 浮动元素之间不发生边距合并 </title>
    <style type="text/css">
      * {margin: 0; border: 0; padding: 0;}
      .d-float {height: 100px; width: 100px; background-color: lightsalmon; margin-top: 10px; margin-bottom: 20px; float: left;}
    </style>
  </head>
  <body>
    <div class="d-float"></div>
    <div class="d-float"></div>
    <div class="d-float"></div>
  </body>
</html>

页面浏览效果：
浮动元素之间不再发生边距合并
说明：

浮动元素之间，不再发生边距合并。

3、边距合并的意义

边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上边距。如果没有边距合并，后续所有段落之间的边距都将是相邻上边距和下边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生边距合并，段落之间的上边距和下边距就合并在一起，这样各处的距离就一致了。如下：
边距合并的意义