用途
margin-right 规定该属性用于设置与元素相关联的盒子模型的右外边距,可为负值。
竖直排列相邻的两个盒子模型的外边距会重叠,称为 margin collapsing.
语法
代码语言:javascript复制/* <length> value */
margin-right: 2.5em;
/* <percentage> value */
margin-right: 95%;
/* Keyword values */
margin-right: auto;
值
值 | 描述 |
---|---|
<length> | 此关键词表示一个固定宽度 <length>值: 可以是一个绝对宽度,e.g. in px, 也可以是一个相对宽度, e.g. in em, 或者相对视窗的大小,e.g. in vh. |
<percentage> | 此关键词表示<percentage>始终同包含该元素的容器宽度有关。 |
auto | 此关键词表示auto关键词表示在当前布局模式下,浏览器根据接收的左边距自动计算出外边距。 |
例子
代码语言:javascript复制/* HTML */
<div id="red">
<div id="orange"></div>
<div id="gray"></div>
</div>
/* CSS */
#red {
width: 200px;
height: 200px;
background: red;
}
#orange {
width: 50px;
height: 50px;
background: orange;
margin-right: -30px;
}
#gray {
width: 50px;
height: 50px;
background: gray;
}