左边距 | margin-left
margin-left
margin-left 属性 设置与元素相关联的盒子模型的左外边距。这个值可以为负值。
/* <length> values */
margin-left: 10px; /* An absolute length */
margin-left: 1em; /* relative to the text size */
margin-left: 5%; /* relative to the nearest block container's width */
/* Keyword values */
margin-left: auto;
/* Global values */
margin-left: inherit;
margin-left: initial;
margin-left: unset;
竖直排列相邻的两个盒子模型的外边距会重叠 margin collapsing。
在长度(width)被约束这种极少情况下，( 即当所有的宽度，左边界，边界，填充内容区域和边缘都被定义), 左边界会被忽略，如果被制定为auto值，会有相同的计算值。
| 初始值 | 0 |
|---|---|
| 适用元素 | all elements, except elements with table display types other than table-caption, table and inline-table. It also applies to ::first-letter. |
| 是否是继承属性 | no |
| Percentages | refer to the width of the containing block |
| 适用媒体 | visual |
| 计算值 | the percentage as specified or the absolute length |
| Animation type | a length |
| 正规顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
该margin-left属性被指定为关键字auto，或a <length>或a <percentage>。它的值可以是正值，零值或负值。
值
<length>一个固定宽度 <length> 值 : 可以是一个绝对宽度, e.g. inpx, 也可以是个相对宽度, e.g. inem, 或者相对视窗的大小, e.g. invh.<percentage>百分比值<percentage>最近的块容器的宽度 width.autoauto关键词表示在当前布局模式下，浏览器根据接收的左边距自动计算出外边距。如果有几组margin-left和margin-right 设置为auto，那么最后计算的空间分布，会根据display，float，position属性，自动生成以下几种情况：
| Value of display | Value of float | Value of position | Computed value of auto | Comment |
|---|---|---|---|---|
| inline, inline-block, inline-table | any | static or relative | 0 | Inline layout mode |
| block, inline, inline-block, block, table, inline-table, list-item, table-caption | any | static or relative | 0, 除非margin-left和 margin-right同时都设置为auto. 这样的话，元素就被设置为基于父元素居中。 | Block layout mode |
| block, inline, inline-block, block, table, inline-table, list-item, table-caption | left or right | static or relative | 0 | Block layout mode (floating element) |
| any table-*, except table-caption | any | any | 0 | Internal table-* elements don't have margins, use border-spacing instead |
| any, except flex, inline-flex, or table-* | any | fixed or absolute | 0, except if both margin-left and margin-right are set to auto. In this case, it is set to the value centering the border area inside the available width, if fixed. | Absolutely positioned layout mode |
| flex, inline-flex | any | any | 0, except if there is any positive horizontal free space. In this case, it is evenly distributed to all horizontal auto margins. | Flexbox layout mode |
正式语法
<length> | <percentage> | auto
示例
.content { margin-left: 5%; }
.sidebox { margin-left: 10px; }
.logo { margin-left: -5px; }
规范
| Specification | Status | Comment |
|---|---|---|
| CSS Basic Box ModelThe definition of 'margin-left' in that specification. | Working Draft | No significant change from CSS 2.1. |
| CSS TransitionsThe definition of 'margin-left' in that specification. | Working Draft | Defines margin-left as animatable. |
| CSS Flexible Box Layout ModuleThe definition of 'margin-left' in that specification. | Candidate Recommendation | Defines the behavior of margin-left on flex items. |
| CSS Level 2 (Revision 1)The definition of 'margin-left' in that specification. | Recommendation | Like in CSS1, but removes its effect on inline elements. |
| CSS Level 1The definition of 'margin-left' in that specification. | Recommendation | Initial definition. |
Browser compatibility
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Basic support | 1.0 | (Yes) | 1.0 (1.7 or earlier) | 3.0 | 3.5 | 1.0 (85) |
| auto value | 1.0 | (Yes) | 1.0 (1.7 or earlier) | 6.0 (strict mode) | 3.5 | 1.0 (85) |
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | 1.0 | (Yes) | 1.0 (1) | 6.0 | 6.0 | 1.0 |
