CSS Margin 边距详解

开发实例

CSS 实现水平垂直居中

纯 absolute

absolute 加 calc

absolute 加 transform

absolute 加 margin

overflow 兼容 Safari 浏览器

CSS Margin 边距详解

1、简写属性语法：margin：[ <length> | <percentage> | auto ]{1,4}

2、适用于：所有元素，除table | inline-table | table-caption的表格类元素之外、继承性：无

3、动画性：看每个独立属性、计算值：看每个独立属性、媒　体：视觉

4、分拆纵向独立属性语法：

vertical-margin：<length> | <percentage> | auto

vertical-margin = margin-top,margin-bottom

5、默认值：0、适用于：所有元素，除table | inline-table | table-caption的表格类元素和非替代行内元素之外

6、动画性：当取值为 <length> | <percentage> 时、计算值：指定的百分比或绝对长度值

7、分拆横向独立属性语法：

horizontal-margin：<length> | <percentage> | auto

horizontal-margin = margin-right,margin-left

取值：

1）auto：水平（默认）书写模式下，vertical-margin计算值为0，horizontal-margin取决于包含块的剩余可用空间。详见：margin系列之keyword auto

2）<length>：用长度值来定义外补白。可以为负值

3）<percentage>：用百分比来定义外补白。水平（默认）书写模式下，参照其包含块的width进行计算，其它情况参照height，可以为负值

说明：简写属性。为元素设置所有四个方向（上右下左）的外边距。

1）margin属性接受1~4个参数值。如果提供四个参数值，将按上、右、下、左的顺序作用于四边；提供三个，第一个用于上，第二个用于左、右，第三个用于下；提供两个，第一个用于上、下，第二个用于左、右；只提供一个，同时用于四边。

2）非替代(non-replaced)行内元素可以使用该属性定义horizontal-margin；若要定义vertical-margin，必须改变元素为块级或行内块级。

3）外延边距始终透明，即不可见也无法设置背景等任何样式。

4）某些相邻的margin会发生合并，我们称之为margin折叠：

h2{margin:10px 0;}
div{margin:20px 0;}
......
<h2>这是一个标题</h2>
<div><h2>这是又一个标题</h2>
</div>

本例中，第1个h2的margin-bottom，div的margin-top，第2个h2的margin-top是相邻的，三者会被合并取其中最大的那个值作为最后的间隙，所以它们之间的margin间隙最后是（20px）。

如果给上例中的div加上border的话：

h2{margin:10px 0;}
div{margin:20px 0;border:1px solid #aaa;}
......
<h2>这是一个标题</h2>
<div><h2>这是又一个标题</h2>
</div>

本例中，第一个h2的margin-bottom（10px），div的margin-top（20px）将被合并，但第二个h2的margin-top不与它们合并，因为它被border分隔，不与它们相邻。

margin折叠常规认知：

margin折叠只发生在块级元素上；

浮动元素的margin不与任何margin发生折叠；

设置了属性overflow且值为非visible的块级元素，将不与它的子元素发生margin折叠；

绝对定位元素的margin不与任何margin发生折叠；

根元素的margin不与其它任何margin发生折叠；

对应的脚本特性为：margin。

分拆纵向独立属性。为元素设置上、下外边距。

替代(Replaced)行内元素可以应用该属性；非替代(non-Replaced)行内元素要使用该属性必须改变元素为块级或行内块级。

水平（默认）书写模式下，margin 合并只发生在vertical-margin上。

对应的脚本特性分别为：marginTop, marginBottom。

分拆横向独立属性。为元素设置上、下外边距。

所有的行内元素均可以应用该属性。

默认情况下，horizontal-margin不会发生 margin 折叠，除非将书写模式改变为纵向。

对应的脚本特性分别为：marginRight, marginLeft。

开发实例

负值逆向移动

Html

<div class="commonEvenRowDiv"><span class="commonOddColumnDiv">81</span><span class="commonEvenColumnDiv">82</span><span class="commonOddColumnDiv">83</span><span class="commonEvenColumnDiv"><a href="javascript:ajaxToUdp('J32')" class="forcedLeftShift30 forcedTopShift30"><img src="data:image/area/futian_1.png"></a></span><span class="commonOddColumnDiv">85</span><span class="commonEvenColumnDiv">86</span><span class="commonOddColumnDiv">87</span><span class="commonEvenColumnDiv">88</span><span class="commonOddColumnDiv">89</span>
</div>

CSS

/*强制元素反向左移30*/
.forcedLeftShift30 {float: left;margin-left: -30px;
}/*强制元素反向上移30*/.forcedTopShift30 {float: left;margin-top: -20px;
}

页面效果

CSS 实现水平垂直居中

纯 absolute

这种方式比较好理解，兼容性也很好，但是需要知道子元素的固定宽高值。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style type="text/css">.out {border: 1px solid red;width: 300px;height: 200px;/*父元素使用相对定位*/position: relative;}.inner {background: green;width: 100px;height: 100px;/*子元素使用绝对定位*/position: absolute;;top: 50%;left: 50%;margin-left: -50px;margin-top: -50px;}</style>
</head>
<body>
<div class="out"><div class="inner">万里长城</div>
</div>
</body>
</html>

父元素 out 使用相对定位，子元素 inner 使用绝对定位

子元素相对顶部偏移 50%，相对左边偏移 50%

根据子元素 inner 自己的宽高，然后减去自己宽高的一半

1）绝对定位的百分比是相对于父元素的宽高，但绝对定位是基于子元素的左上角

2）借助外边距的负值让元素向相反方向定位，通过指定子元素的外边距为子元素宽/高一半的负值，让子元素居中

absolute 加 calc

方式一虽然好理解，但是要求被居中的子元素必须是固定宽高，而现在通常都是自适应的页面，所以需要优化。

css3 的 calc() 函数允许在属性值中执行数学计算操作(加减乘除)，如下所示使用 calc() 指定一个元素宽的固定像素值为多个数值的和：

.foo {width: calc(100px + 50px);
}

从而引出了本方法，本方式子元素宽高值即可以固定的，也可以是相对的。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style type="text/css">.out {border: 1px solid red;width: 300px;height: 200px;/*父元素使用相对定位*/position: relative;}.inner {background: green;/**子元素宽高可以是固定值，也可以是相对值*/width: 200px;height: 100px;/*子元素使用绝对定位,父元素的宽高的50% 减去自己宽高的一半*/position: absolute;;left: calc(50% - 100px);top: calc(50% - 50px);}</style>
</head>
<body>
<div class="out"><div class="inner">万里长城</div>
</div>
</body>
</html>

如上所示子元素宽高为固定值。如下所示子元素宽高为相对值时，同理也是在自己的基础上再去掉一半即可。

        .inner {background: green;/**子元素宽高可以是固定值，也可以是相对值*/width: 80%;height: 60%;/*子元素使用绝对定位,父元素的宽高的50% 减去自己宽高的一半*/position: absolute;;left: calc(50% - 40%);top: calc(50% - 30%);}

absolute 加 transform

仍然是绝对定位，可以使用 css3 新增的 transform，transform 的 translate 属性也可以设置百分比，其是相对于自身的宽和高，所以可以将 translate 设置为 -50%，就可以做到居中了。《CSS3 transform 属性》

这种方式子元素宽高可以是固定的，也可以是相对的。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style type="text/css">.out {border: 1px solid red;width: 300px;height: 200px;/*父元素使用相对定位*/position: relative;}.inner {background: green;/*子元素宽高可以是固定值，也可以是相对值*//*width: 200px;height: 150px;*/width: 80%;height: 60%;/*子元素使用绝对定位*/position: absolute;;/**相对父元素距离顶部和左边偏移50%*/top: 50%;left: 50%;/*相对自己再向上和向左偏移自己的一半*/transform: translate(-50%, -50%);}</style>
</head>
<body>
<div class="out"><div class="inner">万里长城</div>
</div>
</body>
</html>

absolute 加 margin

这种方式也是非常常用的方式，被居中的子元素宽高可以是固定值，也可以是相对值，兼容性也很好。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style type="text/css">.out {border: 1px solid red;width: 300px;height: 200px;/*父元素使用相对定位*/position: relative;}.inner {background: green;/**子元素宽高可以是固定值，也可以是相对值*/width: 60%;height: 60%;/*子元素使用绝对定位*/position: absolute;;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}</style>
</head>
<body>
<div class="out"><div class="inner">万里长城</div>
</div>
</body>
</html>

通过设置各个方向的距离都是 0，再将 margin 设为 auto，就可以在各个方向上居中了。

overflow 兼容 Safari 浏览器

1、overflow 属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

2、overflow 设置的滚动条在 PC 上正常，有时候却在 Safari 上没有效果，此时加上 -webkit-overflow-scrolling: touch; 即可

.rightDiv {width: 80%;height: 90%;/*border: 1px #ff0000 solid;*/overflow: auto;/*兼容 Safari 浏览器*/-webkit-overflow-scrolling: touch;background-color: #344861;float: left;
}