margin-left
该属性用于设置与元素相关联的盒子模型的左外边距。这个值可以为负值。
竖直排列相邻的两个盒子模型的外边距会重叠 margin collapsing。
语法
/* <length> value */ margin-left: 2.5em; /* <percentage> value */ margin-left: 95%; /* Keyword values */ margin-left: auto; margin-left: inherit; margin-left: initial; margin-left: unset;
值
| 值 | 描述 |
|---|---|
| <length> | 此关键词表示一个固定宽度 <length> 值 : 可以是一个绝对宽度, e.g. in px, 也可以是个相对宽度, e.g. in em, 或者相对视窗的大小, e.g. in vh. |
| <percentage> | 此关键词表示百分比值 <percentage> 最近的块容器的宽度 width 。 |
| 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-left: 30px;
}
#gray {
width: 50px;
height: 50px;
background: gray;
}
执行结果