margin - CSS：层叠样式表
marginBaseline Widely available *This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
Learn moreSee full compatibilityReport feedbackmargin 属性为给定元素设置所有四个（上右下左）方向的外边距属性。也就是 margin-top、margin-right、margin-bottom 和 margin-left 四个外边距属性设置的简写。
尝试一下
margin: 1em;
margin: 5% 0;
margin: 10px 50px 20px;
margin: 10px 50px 20px 0;
margin: 0;
#container {
width: 300px;
height: 200px;
display: flex;
align-content: flex-start;
flex-direction: column;
justify-content: flex-start;
}
.row {
height: 33.33%;
display: inline-block;
border: solid #ce7777 10px;
background-color: #2b3a55;
flex-shrink: 0;
}
#example-element {
border: solid 10px #ffbf00;
background-color: #2b3a55;
}
上、下外边框的设置对*不可替换*内联元素，如 和 ，无效。
备注：
外边距控制的是元素外部空出的空间。相反，padding 操作元素内部空出的空间。
语法css/* 应用于所有边 */
margin: 1em;
margin: -3px;
/* 上边下边 | 左边右边 */
margin: 5% auto;
/* 上边 | 左边右边 | 下边 */
margin: 1em auto 2em;
/* 上边 | 右边 | 下边 | 左边 */
margin: 2px 1em 0 auto;
/* 全局值 */
margin: inherit;
margin: initial;
margin: unset;
margin 属性接受 1~4 个值。每个值可以是
当只指定一个值时，该值会统一应用到全部四个边的外边距上。
指定两个值时，第一个值会应用于上边和下边的外边距，第二个值应用于左边和右边。
指定三个值时，第一个值应用于上边，第二个值应用于右边和左边，第三个则应用于下边的外边距。
指定四个值时，依次（顺时针方向）作为上边，右边，下边，和左边的外边距。
可取值
以固定值为外边距。
相对于包含块的宽度，以百分比值为外边距。
auto
让浏览器自己选择一个合适的外边距。有时，在一些特殊情况下，该值可以使元素居中。
语法格式margin = <'margin-top'>{1,4}
Sources: CSS Box Model Module Level 4, CSS Anchor Positioning, CSS Values and Units Module Level 4示例简单的例子HTML
html
CSS
css.center {
margin: auto;
background: lime;
width: 66%;
}
.outside {
margin: 3rem 0 0 -3rem;
background: cyan;
width: 66%;
}
更多的例子cssmargin: 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; /* 上边和下边：无外边距 */
/* 水平方向居中 */
贴士水平居中在现代浏览器中实现水平居中，可以使用 display: flex; justify-content: center;。
不过，在 IE8-9 这样的不支持弹性盒布局的旧式浏览器中，上述代码并不会生效。此时要实现在父元素中居中，可使用 margin: 0 auto;。
外边距重叠上下元素的下上外边距有时会重叠，实际空出的空间长度变为两外边距中的较长值。查看外边距重叠可找到更多信息。
规范SpecificationCSS Box Model Module Level 3 # margin初始值该简写所对应的每个属性：margin-bottom: 0margin-left: 0margin-right: 0margin-top: 0适用元素all elements, except elements with table display types other than table-caption, table and inline-table. It also applies to ::first-letter.是否是继承属性否Percentagesrefer to the width of the containing block计算值该简写所对应的每个属性：margin-bottom: the percentage as specified or the absolute lengthmargin-left: the percentage as specified or the absolute lengthmargin-right: the percentage as specified or the absolute lengthmargin-top: the percentage as specified or the absolute length动画类型a length浏览器兼容性参阅
CSS 基础框盒模型介绍
外边距重叠
margin-top、margin-right、margin-bottom 和 margin-left
逻辑相关的属性：margin-block-start、margin-block-end、margin-inline-start 和 margin-inline-end 与其简称 margin-block 和 margin-inline