margin-left

margin-left 属性设置与元素相关联的盒子模型的左外边距。这个值可以为负值。竖直排列相邻的两个盒子模型的外边距会重叠 margin collapsing 。在长度(width)被约束这种极少情况下，(即当所有的宽度，左边界，边界，填充内容区域和边缘都被定义，左边界会被忽略，如果被制定为 auto 值，会有相同的计算值。

示例 

/* <length> values */
margin-left: 10px;  /* 绝对长度 */
margin-left: 1em;   /* 相对于字号的长度 */
margin-left: 5%;    /* 相对最近块元素的宽度 */

/* keyword values */
margin-left: auto;

/* global values */
margin-left: inherit;
margin-left: initial;
margin-left: unset;

浏览器支持

IE浏览器 火狐浏览器 opera浏览器 chrome浏览器 safari浏览器
浏览器都支持 margin-left

语法

margin-bottom : <length> | <percentage> | auto

取值

  • <length> ：一个固定宽度值：可以是一个绝对宽度，单位 px ,也可以是个相对宽度，单位 em ,或者相对视窗的大小，单位 vh .
  • <percentage> ：百分比值。可以为负值&lt。参见 <percentage>
  • auto ：水平（默认）书写模式下，其计算值取决于可用空间。表示在当前布局模式下，浏览器根据接收的左边距自动计算出外边距。
    • 初始值 0
    适用于 所有元素，除非 table | inline-table | table-caption 的表格类元素之外
    继承性 无
    动画性 是
    计算值 指定的百分比、绝对长度或 auto

    实例 

    .content { margin-left:   5%; }
.sidebox { margin-left: 10px; }
.logo    { margin-left: -5px; }

    上篇： margin-bottom