简体中文
margin-left 属性 设置与元素相关联的盒子模型的左外边距。这个值可以为负值。
margin-left: <length> | <percentage> | auto;
auto
auto 关键词表示在当前布局模式下,浏览器根据接收的左边距自动计算出外边距。如果有几组 margin-left 和 margin-right 设置为 auto,那么最后计算的空间分布,会根据 display,float,position 属性,自动生成以下几种情况:
Value of display
Value of float
Value of position
Computed value of auto
Comment
inline, inline-block, inline-table
any
static or relative
0
Inline layout mode
block, inline, inline-block, block, table, inline-table, list-item, table-caption
any
static or relative
0, 除非margin-left和 margin-right 同时都设置为 auto。这样的话,元素就被设置为基于父元素居中。
Block layout mode
block, inline, inline-block, block, table, inline-table, list-item, table-caption
left or right
static or relative
0
Block layout mode (floating element)
any table-*, except table-caption
any
any
0
Internal table-* elements don't have margins, use border-spacing instead
any, except flex, inline-flex, or table-*
any
fixed or absolute
0, except if both margin-left and margin-right are set to auto. In this case, it is set to the value centering the border area inside the available width, if fixed.
Absolutely positioned layout mode
flex, inline-flex
any
any
在水平方向上有空余空间的情况下,空余的空间会被平均分给水平方向上写有 margin-left:auto 属性的元素的外边距
Flexbox layout mode
平台 | 默认值 |
---|---|
app-uvue | 0 |
web | 0 |
安卓系统版本 | 安卓 uni-app | 安卓 uni-app-x | iOS 系统版本 | iOS uni-app | iOS uni-app-x | |
---|---|---|---|---|---|---|
margin-left | 5.0 | √ | 3.9+ | 9.0 | √ | - |