margin-right

# margin-right

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

# uni-app x 兼容性

Web	Android	iOS
4.0	3.9	4.11

# 浏览器兼容性

Chrome	Edge	Firefox	Opera	Safari	IE
√（ 1 ）	√（ 12 ）	√（ 1 ）	√（ 3.5 ）	√（ 1 ）	√（ 3 ）

# 语法

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

# margin-right 的属性值

名称

兼容性

描述

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, except if both margin-left and margin-right are set to auto. In this case, it is set to the value centering the element inside its parent.
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
0, except if there is any positive horizontal free space. In this case, it is evenly distributed to all horizontal auto margins.
Flexbox layout mode

# 默认值

0

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

# 示例

hello uni-app x

Template

Script

<template>
  <view style="flex-grow: 1;">
    <view>
      <text>margin-right: 25px</text>
      <view style="width: 250px;height: 250px;background-color: gray;">
        <view class="common" style="background-color: red;"></view>
        <view class="common" style="margin-right: 25px;"></view>
        <view class="common" style="background-color: blue;"></view>
      </view>
    </view>

    <view>
      <text>margin-right: 10%</text>
      <view style="width: 250px;height: 250px;background-color: gray;">
        <view class="common" style="background-color: red;"></view>
        <view class="common" style="margin-right: 10%;"></view>
        <view class="common" style="background-color: blue;"></view>
      </view>
    </view>
  </view>
</template>



<style>
  .common {
    height: 50px;
    background-color: green;
  }
</style>