margin
Baseline 广泛可用 *
试一试
margin: 1em;
margin: 5% 0;
margin: 10px 50px 20px;
margin: 10px 50px 20px 0;
margin: 0;
<section id="default-example">
<div id="container">
<div class="row"></div>
<div class="row transition-all" id="example-element"></div>
<div class="row"></div>
</div>
</section>
#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;
}
构成属性
此属性是以下 CSS 属性的简写：
语法
css
/* apply to all four sides */
margin: 1em;
margin: -3px;
/* top and bottom | left and right */
margin: 5% auto;
/* top | left and right | bottom */
margin: 1em auto 2em;
/* top | right | bottom | left */
margin: 2px 1em 0 auto;
/* anchor-size() values */
margin: 5% anchor-size(width);
margin: calc(anchor-size(width) / 4) 1em 0
anchor-size(--my-anchor self-inline, 50px);
/* Keyword values */
margin: auto;
/* Global values */
margin: inherit;
margin: initial;
margin: revert;
margin: revert-layer;
margin: unset;
margin 属性可以通过一个、两个、三个或四个值来指定。每个值可以是 <length>、<percentage>，或者关键字 auto。负值会使元素比默认情况下更靠近其相邻元素。
- 当指定一个值时，它会应用于所有四个方向的边距。
- 当指定两个值时，第一个值应用于上下边距，第二个值应用于左右边距。
- 当指定三个值时，第一个值应用于上边距，第二个值应用于左右边距，第三个值应用于下边距。
- 当指定四个值时，边距按上、右、下、左的顺序（顺时针方向）应用。
值
<length>-
边距的大小为固定值。
- 对于锚点定位元素，
anchor-size()函数会解析为一个相对于相关锚点元素宽度或高度的<length>值（参见根据锚点大小设置元素边距）。
- 对于锚点定位元素，
<percentage>-
边距的大小为百分比，相对于包含块的内联尺寸（在水平书写模式下是宽度，由
writing-mode定义）。 auto-
浏览器选择一个合适的边距。例如，在某些情况下，此值可用于使元素居中。
描述
此属性可用于设置元素所有四个方向的边距。边距在元素外部创建额外空间，这与在元素内部创建额外空间的 padding 不同。
水平居中
您可以通过设置 margin: 0 auto; 将元素在其父级内水平居中。
一种更常见的水平居中元素的方法是在容器上设置 display: flex; 和 justify-content: center;，这会使其弹性子项居中。
外边距折叠
元素的上下边距有时会合并成一个单独的边距，该边距等于两个边距中的较大值。有关更多信息，请参见 掌握边距折叠。
正式定义
| 初始值 | 作为简写中的每个属性
|
|---|---|
| 应用于 | 所有元素，除了具有 table-caption、table 和 inline-table 以外的表格display 类型的元素。它也适用于 ::first-letter。 |
| 继承性 | 否 |
| 百分比 | 参照包含块的宽度 |
| 计算值 | 作为简写中的每个属性
|
| 动画类型 | 一个长度 |
正式语法
margin =
<'margin-top'>{1,4}
<margin-top> =
<length-percentage> |
auto |
<anchor-size()>
<length-percentage> =
<length> |
<percentage>
<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )
<anchor-name> =
<dashed-ident>
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
示例
基本示例
HTML
html
<div class="center">This element is centered.</div>
<div class="outside">This element is positioned outside of its container.</div>
CSS
css
.center {
margin: auto;
background: lime;
width: 66%;
}
.outside {
margin: 3rem 0 0 -3rem;
background: cyan;
width: 66%;
}
更多示例
css
margin: 5%; /* All sides: 5% margin */
margin: 10px; /* All sides: 10px margin */
margin: 1.6em 20px; /* top and bottom: 1.6em margin */
/* left and right: 20px margin */
margin: 10px 3% -1em; /* top: 10px margin */
/* left and right: 3% margin */
/* bottom: -1em margin */
margin: 10px 3px 30px 5px; /* top: 10px margin */
/* right: 3px margin */
/* bottom: 30px margin */
/* left: 5px margin */
margin: 2em auto; /* top and bottom: 2em margin */
/* Box is horizontally centered */
margin: auto; /* top and bottom: 0 margin */
/* Box is horizontally centered */
规范
| 规范 |
|---|
| CSS Box Model Module Level 3 # margin |
浏览器兼容性
加载中…