margin-left 属性

Html5知典

发布于 2019-11-26 16:54:42

5220

发布于 2019-11-26 16:54:42

文章被收录于专栏：Html5知典Html5知典

用途

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

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2018-09-20，如有侵权请联系 cloudcommunity@tencent.com 删除

auto