margin-right

该属性用于设置与元素相关联的盒子模型的右外边距，可为负值。

竖直排列相邻的两个盒子模型的外边距会重叠，称为 margin collapsing.

 

语法

/* <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关键词表示在当前布局模式下，浏览器根据接收的左边距自动计算出外边距。

例子

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;
}

执行结果

参考

相关页面

外部链接


跳至内容顶部