margin

margin属性为给定元素设置所有四个（上下左右）方向的外边距属性。这是四个外边距属性设置的简写。四个外边距属性设置分别是： margin-top ， margin-right ， margin-bottom 和 margin-left 。指定的外边距允许为负数。 margin 的 top 和 bottom 属性对非替换内联元素无效，例如 <span> 和 <code> 。

浏览器支持

IE浏览器 火狐浏览器 opera浏览器 chrome浏览器 safari浏览器
浏览器都支持 margin

语法

margin : <style> /*<单值语法>所有边缘*/举例： margin: 1em;
margin : <vertical> <horizontal> /*<二值语法>纵向横向*/举例： margin: 5% auto;
margin : <top> <horizontal> <bottom> /*<三值语法>上横向下*/举例： margin: 1em auto 2em;
margin : <top> <right> <bottom> <left> /*<四值语法>上右下左*/举例： margin: 2px 1em 0 auto;
margin : inherit

接受1~4个可选参数，每个参数取值如下：

  • 只有一个值时，这个值会被指定给全部的四个边
  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右
  • 三个值时，第一个值被匹配给上，第二个值被匹配给左和右，第三个值被匹配给下
  • 四个值时，会依次按上、右、下、左的顺序匹配(即顺时针顺序)

取值：

<length> | <percentage> | auto
  • auto ：浏览器会自动选择一个合适的margin来应用。它可以用于将一个块居中。
  • <length> ：获知可用的计数单位。
  • <percentage> ：相对于该元素的包含块的宽度（相对于该块的百分比）。该值可以为负数。

实例

在现代浏览器中，如果要把一些东西水平居中，使用 display:flex;justify-content: center; 然而，在一些老的浏览器，如IE8-9,这些是不可用的。想要把一个元素在其父元素中居中，使用 margin: 0 auto; 

margin: 5%;                /* 所有的边都是 5% 的边距 */
margin: 10px;              /* 所有的边都是 10像素 的边距 */
margin: 1.6em 20px;        /* 上和下边是 1.6字距, 左和右是 20像素 边距 */
margin: 10px 3% 1em;       /* 上边 10像素, 左和右 3%, 下边 1字距 边距 */
margin: 10px 3px 30px 5px; /* 上边 10像素, 右边 3像素, bottom 30px, left 5px margin */
margin: 1em auto;          /* 上和下边 1字距 边距, 该盒子是水平居中的 */
margin: auto;              /* 该盒子是水平居中的, 上下边距为0 */

//html

<div class="ex1">
 margin: auto;
 background: gold;
  width: 66%;
</div>
<div class="ex2">
 margin: 20px 0 0 -20px;
 background: gold;
  width: 66%;
</div>

//CSS

.ex1 {
 margin: auto;
 background: gold;
 width: 66%;
}
.ex2 {
 margin: 20px 0px 0 -20px;
 background: gold;
  width: 66%;
}

下篇： margin-top