CSS参考手册
基本框模型 | Basic Box Model
左边距 | 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.auto
auto关键词表示在当前布局模式下,浏览器根据接收的左边距自动计算出外边距。如果有几组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 |
|
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 |
基本框模型 | Basic Box Model相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。