#margin

#介绍

margin 属性为给定元件设置所有四个（上右下左）方向的外边距属性。也就是 margin-top、margin-right、margin-bottom、margin-left 四个外边距属性设置的简写。该属性可以为负值。

#使用示例

<Go/>

css-apisrc/margin/App.tsx

Code

预览

#语法

/* 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;

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

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

#取值

#0px

默认值。

#<length>

<length> 定义了一个确定值。可以为负值。

#<percentage>

相对于包含块的宽度，以百分比值为外边距。

#auto

让布局流程自己选择一个合适的外边距。

#形式定义

#形式语法

margin =
  <length-percentage>  |
  auto                 |

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

#与 Web 的区别

mdn: margin

1. 在 Lynx 下，margin 任何情况都不会重叠。
2. 目前支持在弹性布局、网格布局、线性布局的非 position: fixed/absolute/sticky 子元件中使用 auto。其中，对于线性布局，仅支持在交叉轴方向上的外边距 auto 值。

#兼容性