margin-right
margin-right
属性设置与元素相关联的盒子模型的右外边距。这个值可以为负值。竖直排列相邻的两个盒子模型的外边距会重叠，称为
外边距重叠
示例
/* <length> values */ margin-right: 20px; /* an absolute length */ margin-right: 1em; /* a length relative to the text size */ margin-right: 5%; /* a margin relative to the nearest block container's width */ /* keyword values */ margin-right: auto; /* global values */ margin-right: inherit; margin-right: initial; margin-right: unset;
浏览器支持
|
|
|
|
|
浏览器都支持
margin-right
|
||||
语法
margin-right : <length> | <percentage> | auto
取值：
-
<length>
：一个固定宽度
<length>值：可以是一个绝对宽度，单位px，也可以是一个相对宽度，单位code>em,或者相对视窗的大小，单位vh。 -
<percentage>
：以百分比为单位的
margin值，计算时是相对于其最近的父级容器的宽度。 - auto ：水平（默认）书写模式下，其计算值取决于可用空间
auto
：关键词表示在当前布局模式下，浏览器根据接收的左边距自动计算出外边距。如果有几组
margin-left
和
margin-right
设置为auto，那么最后计算的空间分布，会根据
display
，
float
，
position
属性，自动生成以下几种情况：
display
值
|
float
值
|
position
值
|
计算
auto
|
说明 |
|---|---|---|---|---|
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 |
| 适用于 | 所有元素，除非 table | inline-table | table-caption 的表格类元素之外 |
| 继承性 | 无 |
| 动画性 | 是 |
| 计算值 | 指定的百分比、绝对长度或 auto |
实例
.content { margin-right: 5%; }
.sidebox { margin-right: 10px; }
.logo { margin-right: -5px; }