margin-right
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
* Some parts of this feature may have varying levels of support.
尝试一下
margin-right: 1em;
margin-right: 10%;
margin-right: 10px;
margin-right: 0;
<section id="default-example">
<div id="container">
<div class="col"></div>
<div class="col transition-all" id="example-element"></div>
<div class="col"></div>
</div>
</section>
#container {
width: 300px;
height: 200px;
display: flex;
align-content: flex-start;
justify-content: flex-start;
}
.col {
width: 33.33%;
border: solid #5b6dcd 10px;
background-color: rgba(229, 232, 252, 0.6);
flex-shrink: 0;
}
#example-element {
border: solid 10px #ffc129;
background-color: rgba(255, 244, 219, 0.6);
}
两个相邻的盒子的垂直边距可能会合并。这被称为外边距折叠。
语法
css
/* <length> 值 */
margin-right: 20px; /* 绝对长度 */
margin-right: 1em; /* 相对于文本大小 */
margin-right: 5%; /* 相对于最近的块级容器的宽度 */
/* 关键字值 */
margin-right: auto;
/* 全局值 */
margin-right: inherit;
margin-right: initial;
margin-right: revert;
margin-right: revert-layer;
margin-right: unset;
margin-right 属性可以被指定为关键字 auto、<length> 或 <percentage>。它的值可以是正值、零或负值。
值
<length>-
外边距的大小为固定值。
<percentage>-
外边距的大小为相对于包含块的行级尺寸（由
writing-mode定义的水平文字的宽度）的百分比。 auto-
右边距接收未使用的水平空间中的一部分（这主要由所使用的布局模式确定）。如果
margin-left和margin-right的值都是auto，则最后计算的空间是均匀分布的。下表总结了不同的情况：display的值float的值position的值auto的计算值注释 inline、inline-block、inline-table任意 static或relative0行级布局模式 block、inline、inline-block、block、table、inline-table、list-item、table-caption任意 static或relative0，除非将margin-left和margin-right都设置为auto。在这种情况下，它被设置为将元素置于其父级元素中心的值。块级布局模式 block、inline、inline-block、block、table、inline-table、list-item、table-captionleft或rightstatic或relative0块级布局模式（浮动元素） table-*中的任意一个，除了table-caption任意 任意 0内部的 table-*元素没有外边距，请使用border-spacing代替。任意，除了 flex、inline-flex或table-*任意 fixed或absolute0，除非将margin-left和margin-right都设置为auto。在这种情况下，如果width固定，它会被设置为将边框区域在可用宽度内居中的值。绝对定位布局模式 flex、inline-flex任意 任意 0，除非存在任何正水平可用空间。在这种情况下，它会均匀分配到所有水平的auto外边距中。弹性盒布局模式
形式定义
形式语法
margin-right =
<length-percentage> |
auto |
<anchor-size()>
<length-percentage> =
<length> |
<percentage>
<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )
<anchor-name> =
<dashed-ident>
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
示例
使用像素和百分比设置右边距
css
.content {
margin-right: 5%;
}
.sidebox {
margin-right: 10px;
}
.logo {
margin-right: -5px;
}
规范
| Specification |
|---|
| CSS Box Model Module Level 3 # margin-physical |
浏览器兼容性
Loading…