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:<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 orrelative | 0 | Inline layout mode |
---|
block ,inline ,inline-block ,block ,table ,inline-table ,list-item ,table-caption | any | static orrelative | 0 , except if bothmargin-left andmargin-right are set toauto . 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 orright | static orrelative | 0 | Block layout mode(floating element) |
---|
anytable-* ,excepttable-caption | any | any | 0 | Internaltable-* elements don't have margins,useborder-spacing instead |
---|
any,exceptflex ,inline-flex ,ortable-* | any | fixed orabsolute | 0 , except if bothmargin-left andmargin-right are set toauto . In this case, it is set to the value centering the border area inside the availablewidth , 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 horizontalauto margins. | Flexbox layout mode |
---|
初始值 | 0 |
适用于 | 所有元素,除非 table | inline-table | table-caption 的表格类元素之外 |
继承性 | 无 |
动画性 | 是 |
计算值 | 指定的百分比、绝对长度或auto |
实例
.content { margin-right: 5%; }
.sidebox { margin-right: 10px; }
.logo { margin-right: -5px; }