CSS之margin精髓讲解，深入骨髓！！！

最新推荐文章于 2023-07-11 12:59:32 发布

zteenmozart

最新推荐文章于 2023-07-11 12:59:32 发布

阅读量506

点赞数 1

分类专栏： HTML和CSS

本文链接：https://blog.csdn.net/ZteenMozart/article/details/80506732

版权

HTML和CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

深入理解css中的margin属性

之前一直觉得margin是非常的EASY，最近在公司中遇到了一些问题，所以仔细研究了以下，才发现这margin原来深不可测啊，遂有了这篇文章！

重磅一：margin–基础知识

　　要介绍margin的基础知识，我们不可回避地要谈到css盒子模型（Box Model），一般而言，css盒子模型是用来设计和布局的。它本质上是一个盒子，包括：外边距（margin）、边框（border）、内边距（padding）以及最中间的内容（content）。下图即为盒子模型（这里只谈W3C规范的标准盒模型，而不谈IE5和IE6在怪异模式中使用的非标准的盒子模型）：

　　我们要介绍的margin在最外层，因为margin（外边距）一定是透明的，所以它可以用来使得不同的盒子之间留有一定的间隙从而达到布局美观等效果。从上面的盒子模型中我们可以看到，margin在四周均存在，我们可以使用margin-top、margin-right、margin-bottom、margin-left分别设置这四个方向的margin值。（注：由于这部分知识较为基础，所以我不再在这部分不做更多介绍）

重磅二：margin–在同级元素兄弟节点之间应用--分为水平和竖直两种情况

（1）水平方向的外边距合并

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>

    .left{
      display: inline-block;
      width: 300px;
      height: 300px;
      background-color: #5fff41;
      margin-right: 150px;
    }
    .right{
      display: inline-block;
      width: 300px;
      height: 300px;
      background-color: #ffeea2;
      margin-left: 150px;
    }
  </style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
</html>

结论：两个水平方向的盒子相遇，则两者最终的距离为左侧盒子的右外边距和右侧盒子的左外边距之和

（2）竖直方向的外边距合并

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .up {
      height: 100px;
      width: 100px;
      background-color: #aaffaa;
      margin-bottom: 50px;
    }

    .down {
      height: 100px;
      width: 100px;
      background-color: #094e99;
      margin-top: 100px;
    }
  </style>
</head>
<body>
<div class="up"></div>
<div class="down"></div>
</body>
</html>

结论：两个竖直方向的盒子相遇，则两者竖直方向的最终的距离为上方盒子的下外边距和下方盒子的上外边距中较大的一个。

（3）设有一个元素同时设置了margin-top和margin-bottom，但是内容为空，那么这两个margin值也会叠加，值为两者最大的一个

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .up {
      height: 100px;
      width: 100px;
      background-color: #aaffaa;
    }

    .middle {
      margin-top: 100px;
      margin-bottom: 50px;
    }

    .down {
      height: 100px;
      width: 100px;
      background-color: #094e99;
    }
  </style>
</head>
<body>
<div class="up"></div>
<div class="middle"></div>
<div class="down"></div>
</body>
</html>

重磅三：margin–在父元素和子元素之间的应用！！！重中之重！！！

首先在页面中写一个父div和一个子div，大小不同，代码如下：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .father {
      height: 500px;
      width: 500px;
      background-color: #aaffaa;
    }
    .son {
      height: 200px;
      width: 200px;
      background-color: #094e99;
    }
  </style>
</head>
<body>
<div class="father">
  <div class="son"></div>
</div>
</body>
</html>

（1）在子元素中设置水平方向的margin值

    .son {
      height: 200px;
      width: 200px;
      background-color: #094e99;
      margin-left: 50px;
    }

很显然此时，子元素距离左边框的间距为50PX，如果我再给父div加一个padding为50px,则结局也是很显然，截止到现在都一切正常，全部按照我们的逻辑来的，结果也完全符合我们的想法。

（2）在子元素中设置竖直方向的margin值

首先全部复原，回到最初的起点，呆呆的站在镜子前。。。。。就是这样子

此时我给子元素div一个margin-top,这时候就真的发生变化了。

    .son {
      height: 200px;
      width: 200px;
      background-color: #094e99;
      margin-top: 50px;
    }

这并不是我们想要的效果啊，我们希望子元素的上部距离父元素的上部为50px，可是我们看到的却是父元素的上部距离浏览器页面的上部有50px的距离，这是为什么呢？哪里出现问题了呢？

实际上这是因为当父元素没有设置padding值以及border值时，出现了一个bug--父元素的上方与子元素的上方完全重合在了一起，无法分开。所以才会导致上述这种父元素和子元素同时向下的情况

解决办法：

方法一：给父元素添加padding-top值

.father {
  height: 500px;
  width: 500px;
  background-color: #aaffaa;
  padding-top: 1px;
}

方法二：给父元素添加border值

.father {
  height: 500px;
  width: 500px;
  background-color: #aaffaa;
  border-top: 1px solid red;
}

方法三：给父元素添加属性overflow:hidden;

.father {
  height: 500px;
  width: 500px;
  background-color: #aaffaa;
  overflow: hidden;
}

方法四：给父元素或者子元素声明浮动float

.father {
  height: 500px;
  width: 500px;
  background-color: #aaffaa;
  float: left;
}

.son {
  height: 500px;
  width: 500px;
  background-color: #aaffaa;
  float: left;
}

方法五：使父元素或子元素声明为绝对定位：position:absolute;

.father {
  height: 500px;
  width: 500px;
  background-color: #aaffaa;
  position: absolute;
}

方法六：给父元素添加属性 overflow:auto; positon:relative；

.father {
  height: 500px;
  width: 500px;
  background-color: #aaffaa;
  position: relative;
  overflow: auto;
}

以上方法均经过试验，均可解决此bug，得出的结果：

只是有些方法因为加了border和padding,会有一些小小的误差，此乃美中不足！

重磅四：当margin的值为%时，结果出乎你的意料

（1）同级元素在水平方向使用值为%的margin

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .top {
      height: 300px;
      width: 300px;
      background-color: #aaffaa;
      float: left;
      margin-right: 20%;
    }

    .bottom {
      height: 300px;
      width: 300px;
      background-color: #094e99;
      float: left;
    }
  </style>
</head>
<body>
<div class="top">
</div>
<div class="bottom"></div>
</body>
</html>

此时的margin百分比是相对于该元素的父元素（容器），对于同级元素和父子元素都是如此。

（2）同级元素在竖直方向使用值为%的margin

水平方向没有问题，是以父元素的百分比，但是在同级元素中使用竖直方向的margin时会出现意想不到的结果

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .top {
      height: 300px;
      width: 300px;
      background-color: #aaffaa;
      margin-bottom: 20%;
    }

    .bottom {
      height: 300px;
      width: 300px;
      background-color: #094e99;
    }
  </style>
</head>
<body>
<div class="top">
</div>
<div class="bottom"></div>
</body>
</html>

我们发现，当我在缩小浏览器的高度时，竖直方向上的间距并没有缩小！！！而当我缩小浏览器的宽度时，竖直方向上的距离缩小了！！！

由此可看到。竖直方向的百分比的margin还是以父元素的宽度作为基准进行计算的，而与父元素的高度无关

结论一句话总结：

margin只要以%为单位，它的margin值都是以父元素的宽度为基准进行计算的

stay foolish,stay hungry!!!

都看到这里了，左上角点个关注，持续输出高质量文章，点关注，不迷路！！！

zteenmozart

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
CSS之margin精髓讲解，深入骨髓！！！

深入理解css中的margin属性　　之前我一直认为margin属性是一个非常简单的属性，但是最近做项目时遇到了一些问题，才发现margin属性还是有一些“坑”的，下面我会介绍margin的基本知识以及那些“坑”。这篇博文主要分为以下几个部分：　　第一部分：margin–基础知识　　要介绍margin的基础知识，我们不可回避地要谈到css盒子模型（Box Model），一般而言，css盒子模型是...
复制链接

扫一扫