# margin-left

margin-left 属性 设置与元素相关联的盒子模型的左外边距。这个值可以为负值。

# uni-app x 兼容性

Android iOS web
3.9 4.11 4.0

# 语法

margin-left: <length> | <percentage> | auto;

# margin-left 的属性值

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

# 默认值

0

注意 app端不支持外边距折叠
3.98以下版本当position:fixed|absolute时,margin不支持auto

# 兼容性

# margin-left 的属性值兼容性

Android iOS web
auto 3.9 4.11 4.0

# 浏览器兼容性

Chrome Edge Firefox Opera Safari IE
margin-left √( 1 ) √( 12 ) √( 1 ) √( 3.5 ) √( 1 ) √( 3 )

# 参见