20.2.4　左端外补丁用法

属性margin-left也是margin复合属性之一，表示左边的外延距离，与其他属性一样，其语法表示如下。

/CSS代码：设置左边的外延距离/

margin-left：auto|length

参数值auto表示自适应，length的值是精确值，表示左边的外延值距离，可以为正值或负值，代码20.5表示margin-left的用法。

代码20.5　源代码\第20章\margin-left用法.html

—————————————文件名：margin-left用法.html————————————-

01 ＜html＞

02 ＜head＞

03 ＜title＞margin-left用法＜/title＞

04 ＜style type="text/css"＞

05 #box

06 {

07 /设置宽度为300像素/

08 width：300px；

09 /设置外补丁/

10 margin：auto；

11 /设置边框样式/

12 border：1px solid blue；

13 }

14 #m1

15 {

16 border：1px solid red；

17 margin-left：100px；

18 }

19 ＜/style＞

20 ＜/head＞

21 ＜body＞

22 ＜div id="box"＞

23 这里用层box包含了层m1＜br＞

24 ＜div id="m1"＞margin-left用法＜/div＞

25 上面是层m1右外延距离的效果，margin-left的值为100像素。

26 ＜/div＞

27 ＜/body＞

28 ＜/html＞

【代码解析】代码20.5与代码20.3相似，只是margin-left与margin-right不同，所以效果也不一样，效果如图20.5所示。

综上所述，属性margin由margin-top顶部外延距离（外补丁）、margin-right右边外延距离、margin-bottom底部外延距离和margin-left左边外延距离组成的，且其后面的参数设置都相同。

图　20.5　margin-left用法