Skip to main content

元素外边距 margin

Docs

元素外边距​

margin 属性为给定元素设置所有四个（上下左右）方向的外边距属性。也就是 margin-top，margin-right，margin-bottom，和 margin-left 四个外边距属性设置的简写。

备注
  • 上、下外边框的设置对 不可替换 内联元素，如 <span> 和 <code>，无效。
  • 外边距控制的是元素外部空出的空间。相反，padding 操作元素 内部 空出的空间。
水平居中

在现代浏览器中实现水平居中，可以使用 display: flex; justify-content: center;。

不过，在 IE8-9 这样的不支持弹性盒布局的旧式浏览器中，上述代码并不会生效。此时要实现在父元素中居中，可使用 margin: 0 auto;。

外边距重叠

上下元素的下上外边距有时会重叠，实际空出的空间长度变为两外边距中的较长值。查看外边距重叠可找到更多信息。

/* 应用于所有边 */
margin: 1em;
margin: -3px;

margin: 5%;                 /* 所有边：5% 的外边距 */

margin: 10px;               /* 所有边：10px 的外边距 */

margin: 1.6em 20px;         /* 上边和下边：1.6em 的外边距 */
                            /* 左边和右边：20px 的外边距  */

margin: 10px 3% -1em;       /* 上边：10px 的外边距 */
                            /* 左边和右边：3% 的外边距   */
                            /* 下边：     -1em 的外边距 */

margin: 10px 3px 30px 5px;  /* 上边：10px 的外边距 */
                            /* 右边：3px 的外边距  */
                            /* 下边：30px 的外边距 */
                            /* 左边：5px 的外边距  */

margin: 2em auto;           /* 上边和下边：2em 的外边距 */
                            /* 水平方向居中            */

margin: auto;               /* 上边和下边：无外边距 */
                            /* 水平方向居中        */

/* 全局值 */
margin: inherit;
margin: initial;
margin: unset;

margin 属性接受 1~4 个值。每个值可以是 <length>，<percentage>，或 auto。取值为负时元素会比原来更接近临近元素。

  • 当只指定一个值时，该值会统一应用到全部四个边的外边距上。
  • 指定两个值时，第一个值会应用于上边和下边的外边距，第二个值应用于左边和右边。
  • 指定三个值时，第一个值应用于上边，第二个值应用于右边和左边，第三个则应用于下边的外边距。
  • 指定四个值时，依次（顺时针方向）作为上边，右边，下边，和左边的外边距。

取值​

  • <length>: 以固定值为外边距。
  • <percentage>: 相对于包含块的宽度，以百分比值为外边距。
  • auto: 让浏览器自己选择一个合适的外边距。有时，在一些特殊情况下，该值可以使元素居中。

语法​

margin =
  <'margin-top'>{1,4}

margin-top =
  <length-percentage>  |
  auto

<length-percentage> =
  <length>      |
  <percentage>

规范​

CSS Box Model Module Level 3 (w3c.github.io)

w3c_margin

示例​

Loading Github Gist ...