HTML + CSS 连载 | 17 - 盒子模型的外边距

最新推荐文章于 2024-07-19 15:20:42 发布

Riemann Hypothesis

最新推荐文章于 2024-07-19 15:20:42 发布

阅读量52

点赞数

分类专栏： HTML2CSS 文章标签： html css 前端

本文链接：https://blog.csdn.net/JingnanJia/article/details/134000423

版权

HTML2CSS 专栏收录该内容

64 篇文章 5 订阅

订阅专栏

html+css.jpeg

一、盒子模型-margin的折叠

垂直方向上相邻的两个 margin（margin-top、margin-bottom）有可能会合并成为一个 margin，这种现象叫做 collapse 折叠；水平方向上的 margin（margin-left、margin-right）永远不会折叠。

垂直方向上两个 margin 折叠后，最终 margin 的值会取两个值中较大的值。

margin 的折叠也分为两种情况，分别是相邻兄弟元素之间的折叠和父子元素之间的折叠

如何防止 margin 折叠呢？相邻的两个元素只给一个元素设置 margin 就好了。

兄弟元素之间的 margin 折叠

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box1 {
      height: 100px;
      background-color: #f00;
      margin-bottom: 20px;
    }

    .box2 {
      height: 100px;
      background-color: #f0f;
      margin-top: 30px;
    }
  </style>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>
</html>

在浏览器中打开该 HTML 页面，可以看到如果没有 margin 折叠现象的话间距为 50px，但实际间距只有30px。

为了保持 50px 的间距，我们可以只在相邻块级元素中的一个设置 margin

    .box1 {
      height: 100px;
      background-color: #f00;
      /*解决margin 折叠的问题，只给一个设置 margin 就可以避免折叠问题*/
      margin-bottom: 50px;
    }

    .box2 {
      height: 100px;
      background-color: #0f0;
      /*margin-top: 30px;*/
    }

修改 CSS 代码后再次打开 HTML 页面，效果如下：

可以看到兄弟块级元素之间的间距为 50px。

父子元素之间的 margin 折叠

假设我们想要设置子元素距离浏览器顶部的间距为 90px，在设置父元素 margin-top 为 60px，子元素的 margin-top 为 30px 的情况下，会出现 margin-top 折叠的现象。

创建 HTML 页面，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box1 {
      height: 200px;
      background-color: #f00;
      margin-top: 60px;
    }

    .box2 {
      height: 100px;
      background-color: #f0f;
      margin-top: 30px;
    }
  </style>
</head>
<body>
  <!-- <div class="box1"></div>
  <div class="box2"></div> -->

  <div class="box1">
    <div class="box2"></div>
  </div>
</body>
</html>

此时子元素距离页面顶部的间距并不是 30px+60px=90px，而是取了两者的最大值 60px，这就是父子元素的 margin 折叠现象：

想要子元素距离顶部的距离为 90px，我们只需要设置父元素或者子元素中的一个 margin-top 为 90px 即可，修改 CSS 代码为如下形式：

    .box1 {
      height: 200px;
      background-color: #f00;
      margin-top: 90px;
    }

    .box2 {
      height: 100px;
      background-color: #f0f;
      /* margin-top: 30px; */
    }

在浏览器中打开页面，可以看到子元素距离顶部的间距为 90px。

margin 的折叠和传递之间的区别

为什么会产生上边距传递？块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素。

为什么会产生下边距传递？块级元素的底部线和父元素的底部线重叠，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素。

上下margin折叠（collapse），也称作外边距塌陷。垂直方向上相邻的2个margin（margin-top、margin-bottom）有可能会合并为一个margin。但是水平方向上的margin（margin-left、margin-right）永远不会折叠。

二、块级元素的水平居中

在页面的开发中，我们常需要对一个块级元素进行居中设置，对此我们首先需要把块级元素通过设置 display 变为 inline-block 类型，然后再去设置 text-align: center 就可以实现居中了。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      /*去除 margin 和 padding 间距*/
      margin: 0;
      padding: 0;
      /*针对行内级元素的居中设置*/
      /*行内级元素：行内非替换元素 span、a，行内替换元素 img input， inline-block*/
      text-align: center;
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: #f00;
      display: inline-block;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

在浏览器中打开页面，可以看到盒子居中显示：

text-align: center 设置更多的是针对子元素的居中，也就说是 text-align 要设置在居中元素的父元素中。

除了使用 text-align 外，还可以设置 margin: 0 auto 来实现居中，即上下外边距为 0，左右外边距为 auto。

修改上述 HTML 页面中的代码为以下形式：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      /*针对行内级元素的居中设置*/
      /*行内级元素：行内非替换元素 span、a，行内替换元素 img input， inline-block*/
      /* text-align: center; */
    }

    .container {
      width: 800px;
      height: 150px;
      background-color: #0f0;
    }
    .box {
      width: 100px;
      height: 100px;
      background-color: #f00;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
  </div>
</body>
</html>

在浏览器中打开该页面，可以看到红色的盒子在绿色盒子的范围内水平居中了。

块级元素（block）所占据的宽度 = 内容或者子元素的宽度（width）+ padding + border + margin

块级元素一定是占据父元素的整行，如果设置了 width，就无法占据整行了，那么就会自动设置 margin-right，就是说父元素的宽度等于 width + margin-right + margin-left (如果有的话)

margin auto 不是水平居中的最好的解决方案，最好的方案是 flex 布局。

Riemann Hypothesis

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML + CSS 连载 | 17 - 盒子模型的外边距

块级元素一定是占据父元素的整行，如果设置了 width，就无法占据整行了，那么就会自动设置 margin-right，就是说父元素的宽度等于 width + margin-right + margin-left (如果有的话)此时子元素距离页面顶部的间距并不是 30px+60px=90px，而是取了两者的最大值 60px，这就是父子元素的。margin 的折叠也分为两种情况，分别是相邻兄弟元素之间的折叠和父子元素之间的折叠。想要子元素距离顶部的距离为 90px，我们只需要设置父元素或者子元素中的一个。
复制链接

扫一扫