CSS中margin详细介绍

深入理解css中的margin属性　　之前我一直认为margin属性是一个非常简单的属性，但是最近做项目时遇到了一些问题，才发现margin属性还是有一些“坑”的，下面我会介绍margin的基本知识以及那...

深入理解css中的margin属性

　　之前我一直认为margin属性是一个非常简单的属性，但是最近做项目时遇到了一些问题，才发现margin属性还是有一些“坑”的，下面我会介绍margin的基本知识以及那些“坑”。这篇博文主要分为以下几个部分：

margin--基础知识
margin--在同级元素（非父子关系）之间应用
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）水平方向的外边距合并

　　　　两个水平方向的盒子相遇，那么最终两者之间的距离为左边盒子的右外边距和右边盒子的做外边距之和。

　　　　例1：

　　代码如下：　　

<!DOCTYPE html>

<head>

<title>水平方向的两个盒子</title>

<style>

margin:0;

padding:0;

border:0;

}

body{

font-size: 0;

}

.left{

width: 100px;

height: 100px;

background: red;

display: inline-block;

margin-right: 50px;

font-size: 20px;

}

.right{

width: 100px;

height: 100px;

background: yellow;

display: inline-block;

margin-left: 50px;

font-size: 20px;

}

</style>

</head>

<body>

</body>

</html>

　　效果如下：

这时两者之间的距离刚好为100px。

　　补充说明：大家可以看到，为了使得两个div（块状元素）脱离正常的文档流我使用了display:inline-block;属性，另外，我还把body的font-size设置为0，这样可以解决inline-block自身的问题，否则两个div的举例会大于100px。当然使用float也可以使得两个div出现在同一行中。

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

　　两个竖直方向的盒子相遇时，其竖直方向的距离等于上方盒子的下外边距和下方盒子的上外边距中较大的一个。

　　例2：　

<!DOCTYPE html>

<head>

<title>水平方向的两个盒子</title>

<style>

margin:0;

padding:0;

border:0;

}

.top{

width: 100px;

height: 100px;

margin-bottom: 100px;

background: red;

}

.bottom{

width: 100px;

height: 100px;

margin-top: 50px;

background: green;

}

</style>

</head>

<body>

</body>

</html>

　　效果如下：

这时我们肉眼都可以观察出来，两者竖直方向的举例大约为100px（实际就是100px）而非100+50=150px；这正是因为两个竖直方向的盒子相遇时，其竖直方向的距离等于上方盒子的下外边距和下方盒子的上外边距中较大的一个。　　

　　另外一个有趣的例子就是：假设有一个元素同时设置了margin-top和margin-bottom，但是内容为空，那么这两个margin值也会叠加，值为两者最大的一个，它类似与竖直方向上两个盒子margin值的叠加。代码如下：

<!DOCTYPE html>

<head>

<title>水平方向的两个盒子</title>

<style>

margin:0;

padding:0;

}

.top{

width: 500px;

height: 100px;

background: red;

}

.middle{

margin-top: 100px;

margin-bottom:50px;

}

.footer{

width: 500px;

height: 100px;

background: green;

}

</style>

</head>

<body>

<div class="top">上面的div,高100px</div>

<div class="footer">下面的div，高100px</div>

</body>

</html>

　　最终的效果如下：

　　我们发现这时在上面的div和在下面的div之间的举例并不是100+50=150px，而是两者中的最大者，即100px。　

　　那么W3C为什么会设定这样的标准而不设定和水平方向一样的标准呢？即margin值的叠加，实际上这也是有一定的道理的。比如我们需要设计一个由若干个段落构成的一个页面。我们需要设置margin-top和margin-bottom使得第一段和页面的最上方有一段距离，使得最后一段和最下方有一段距离。下面是不叠加和叠加的效果图：

我们可以看到左边的页面没有重叠，那么两个段落之间的举例就是最上方的两倍间距了，而右边的页面发生了重叠，则所有的间距都是相等的。或许这就是这样设定标准的目的吧，谁知道呢？

第三部分：margin--在父元素和子元素之间应用（重点）

　第二部分介绍了同级元素之间使用margin，而这一部分将要介绍最有意思的父元素和子元素之间margin的应用。这一部分，我们同样从两个方面来讨论。一方面是子元素设置水平方向上的margin值，另一方面是子元素设置竖直方向的margin值。

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

　　　我们可以设置margin-left来控制子元素的左边框和父元素的左边框之间的举例。

　　　例3：

<!DOCTYPE html>

<head>

<title>margin</title>

<style>

*{padding:0; margin:0; border:0;}

.father{

width: 500px;

height: 500px;

background: red;

}

.son{

width: 100px;

height: 100px;

background: green;

margin-left: 100px;

}

</style>

</head>

<body>

<div class="son">宽度为100px，margin-left为100px。</div>

</div>

</body>

</html>

　　我将子元素的margin-left设置为了100px;效果如下：即子元素的左边框和父元素的左边框之间的距离为100px。与在同级元素之间设置margin不同，因为同级元素之间的margin不会考虑到padding,但是在父元素和子元素就不同了，那么如果父元素中如果有padding，效果会是什么样的呢？请看下面一个例子：　　

　　例4：

　　下面我们在上面例子的基础上给父元素添加padding值。

<!DOCTYPE html>

<head>

<title>margin</title>

<style>

*{padding:0; margin:0; border:0;}

.father{

width: 500px;

height: 500px;

padding:100px;

background: red;

}

.son{

width: 100px;

height: 100px;

background: green;

margin-left: 100px;

}

</style>

</head>

<body>

<div class="son">宽度为100px，margin-left为100px。</div>

</div>

</body>

</html>

　　上面的代码给父元素添加了100px的padding值，效果如下：

我们可以看到子元素举例上方的距离为100px，因为子元素一定是在父元素的content的部分的，这点毫无疑问。

但是经过测量可以发现子元素的左边框距离父元素的左边框之间的距离为200px，因为其中还有100px的左padding值，前面的例子因为我没有设置padding值，所以没有观察出来，因此这就说明了在子元素中设置margin-left，其值实际上是子元素的左边框距离父元素左padding内侧的距离。

　例5：margin-right的使用和margin-left的使用是相似的，我在这里只举一个例子。

　　这个例子在子元素中设置了margin-right值，如下所示：

<!DOCTYPE html>

<head>

<title>margin</title>

<style>

*{padding:0; margin:0; border:0;}

.father{

width: 500px;

height: 500px;

padding:100px;

background: red;

}

.son{

float: right;

width: 100px;

height: 100px;

background: green;

margin-right: 100px;

}

</style>

</head>

<body>

<div class="son">宽度为100px，margin-right为100px。</div>

</div>

</body>

</html>

　　这个例子与例4的区别仅在与子元素的位置不同。效果如下：

通过这个例子可以说明margin-right的值是子元素的右边框和父元素的右padding内侧的距离。只是前面的几个例子我没有使用padding，所以无法观察出来。

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

　　　　按照前面的经验，理论上来说，我们同样可以通过设置margin-top的值使得子元素的上边框和父元素的上padding的内侧留有一定的距离。那么我们就试试吧！

　　例6：

<!DOCTYPE html>

<head>

<title>margin</title>

<style>

*{padding:0; margin:0; border:0;}

.father{

width: 500px;

height: 500px;

background: red;

}

.son{

width: 100px;

height: 100px;

background: green;

margin-top: 100px;

}

</style>

</head>

<body>

<div class="son">高度为100px，margin-top为100px。</div>

</div>

</body>

</html>

　　这个例子我设置了margin-top为100px，效果如下：

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

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

　　对于这种问题解决方法有下面几种：

方法一：给父元素添加padding-top值
方法二：给父元素添加border值
方法三：给父元素添加属性overflow:hidden;
方法四：给父元素或者子元素声明浮动float
方法五：使父元素或子元素声明为绝对定位：position:absolute;
方法六：给父元素添加属性 overflow:auto; positon:relative；（注：此方法为后续添加，感谢博友@小精灵Pawn提供此方法）

　　方法一：基于例6，在父元素的css代码中添加padding-top:1px;效果如下：方法的唯一缺点就是增加了1px的误差。　

　　方法二：基于例6，在父元素的css代码中添加border-top:1px solid transparent;效果如下：同样达到了效果，缺点同方法一。　　

　　方法三：基于例6，在父元素的css代码中添加overflow:hidden;效果如下：同样达到了效果，并且没有任何误差的存在。堪称perfect!!!!　　

　　方法四：给父元素或者子元素声明float;基于例6，在子元素css代码添加float:left;或者在父元素css代码添加float:left;均达到效果，这里不再展示相同的图片。

　　　　优点：没有像素的误差。缺点：float有时是不必要的。

　　方法五：给父元素或者子元素添加position:absolute;属性。同样达到效果。

　　　　优点：同方法四。且只要我们不使用top和left也不会有任何影响，所以这也是一种不错的方法。

方法六：给父元素添加overflow:auto;和position:relative;同样达到效果。

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

程序员编程交流QQ群：805358732

如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。

发表于 2021-07-14 10:10
阅读 ( 459 )
分类：WEB前端开发