margin-right

2019-11-26 16:55:12 浏览数 (2)

用途

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

0 人点赞