20.2　外补丁的四边设置

尽管一个margin可表示四个边的外延值，但别忘了还有其他属性可以表示里面的各个边的外延值，如上端可以用margin-top表示，右端可用margin-right表示等。与margin不同的是，这些不是复合属性，后接的只是一个参数值，表示对应的外延值，下面从这四个不同方向的外补丁来介绍其属性。

属性margin是复合属性，其值可以表示margin-top的值，二者效果是一样的，但有时只表示上面的外延距离时，可以只用margin-top属性表示，所以学好margin-top是用好margin的基础。

从字母中可以看到，margin-top表示的是顶端外补丁，也称上端外延距离，是对象与父对象的上端距离，完整语法形式如下。

/CSS代码：设置顶部外延距离/

margin-top：auto|length

其值可接auto，表示相对边的值，另一值可以是数值或百分率，表示一个数值的距离，百分率是基于父对象的高度。代码20.2表示margin-top用法。

代码20.2　源代码\第20章\margin-top用法.html

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

01 ＜html＞

02 ＜head＞

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

04 ＜style type="text/css"＞

05 #m1

06 {

07 /设置宽度和边框/

08 width：200px；

09 border：1px solid red；

10 margin-top：100px；

11 }

12 ＜/style＞

13 ＜/head＞

14 ＜body＞

15 ＜div id="m1"＞margin-top用法＜/div＞

16 ＜/body＞

17 ＜/html＞

【代码解析】代码第10行对ID为m1的层设置了margin-top值，即外补丁顶部距离为100像素，其他方位的距离是默认值，所以层对象与顶端的距离为100像素，且用边框显示出效果，如图20.2所示。

图　20.2　margin-top用法