5分钟深入了解margin属性

1、定义与用法

margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。

说明：这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。

块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。

注释：允许使用负值。

2、属性值

值描述auto浏览器计算外边距。length规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。%规定基于父元素的宽度的百分比的外边距。inherit规定应该从父元素继承外边距。3、深入理解margin属性

3.1、margin的由来

由表及里，盒子模型包括 margin（外边距）、border（边框）、padding（内边距）、content（内容）。而margin 又有 四个属性：margin-top（上外边距）、margin-right（右外边距）、margin-bottom（下外边距）、margin-left（左外边距）。因为margin（外边距）一定是透明的，所以它可以用来使得不同的盒子之间留有一定的间隙从而达到布局美观等效果。

3.2、margin 在同级元素之间的应用

3.2.1、水平方向的外边距合并

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

此时，左右盒子的距离 = 左边盒子的右外边距 + 右边盒子的左外边距 = 10px + 20px = 30px

3.2.2、竖直方向的外边距合并

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

此时，上下盒子之间的距离 = 下边盒子的上边距 = 20px

注意，两种情况的测算方式不同，左右叠加，上下取最大值

3.3、margin在父子元素之间的应用

3.3.1、在子元素中设置水平方向的margin值

此时，子元素的水平方向的外边距为100px。

因为是父子元素，所以还要考虑到父元素的内边距（padding）的情况，现在向父元素里面加入padding：100px;

此时，因为子元素一定位于父元素的内容（content）里，且父元素被内边距撑大了，所以

**子元素在水平方向上与父元素的距离 **= **父元素padding ** + 子元素margin-left = 100px + 100px = 200px

3.3.2、在子元素中设置竖直方向的margin值

此时，没有实现我们想要的效果，但父元素和子元素同时往下移了100px的距离。

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

为了得到理想结果，我们采取以下方法：

在父元素中添加 overflow:hidden;

此时，子元素在竖直方向上距离父元素为100px，达到了想要的效果。

给父元素添加 overflow:auto; 和 position:relative;

3.4、margin值的单位为%的情况

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

但是在同级元素中使用竖直方向的margin时会出现意想不到的结果。

3.4.1、同级元素在水平方向使用值为%的margin

此时，左边盒子和右边盒子之间的距离相差 20% 的 body 水平距离。

3.4.2、同级元素在竖直方向使用值为%的margin

此时，元素之间在竖直方向上使用margin，当值的单位为%时，它是相对于父元素的宽度，即浏览器的宽度。

3.4.3、父子元素使用值为%的margin

此时，父子元素之间水平距离相差 300px * 20% = 60px ，竖直距离相差 300px * 10% = 30px

可以发现，外边距百分比相对的是父元素的宽度，而非高度。