前面已经介绍过，一个组件由元素内容区（content）、内补丁区（padding）、边框区（border）、外补丁区（margin）4个区域组成。其中内补丁区是该组件的内容与边框之间的距离，外补丁区是该组件边框之外的“空白”。
　　内补丁区和外补丁区的颜色总是透明的。


IT料理

内补丁相关属性

　　内补丁相关属性有如下几个。
　　➢　padding：该属性可以同时设置上、下、左、右4个边的内补丁距离。该属性允许设置4个长度，分别对应于上、下、左、右4个边的内补丁距离；如果只设置了1个长度，则该值将作为上、下、左、右4个边的内补丁距离；如果设置了2个长度，则前一个长度将作为上、下边的内补丁距离，后一个长度将作为左、右边的内补丁距离；如果设置了3个长度，则第一个长度将作为上边的内补丁距离，第二个长度将作为左、右边的内补丁距离，第三个长度将作为下边的内补丁距离。
　　➢　padding-top：设置上边的内补丁距离。
　　➢　padding-right：设置右边的内补丁距离。
　　➢　padding-bottom：设置下边的内补丁距离。
　　➢　padding-left：设置左边的内补丁距离。

例子
<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title>轮廓相关属性测试</title>
    <style type="text/css">
        /* 设置div元素的宽度和高度 */
        div {
            width: 300px;
            height: 40px;
            border: 1px solid black;
        }
    </style>
</head>  
<body>  
padding:10px 50px;  
<div style="padding:10px 50px;">  
测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</div>
padding:10px 30px 2px 60px;  
<div style="padding:10px 30px 10px 60px;">  
测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</div>
</body>  
</html>

外补丁相关属性

　　外补丁相关属性有如下几个。
　　➢　margin：该属性可以同时设置上、下、左、右4个边的外补丁距离。该属性允许设置4个长度，分别对应于上、下、左、右4个边的外补丁距离；如果只设置了1个长度，则该值将作为上、下、左、右4个边的外补丁距离；如果设置了2个长度，则前一个长度将作为上、下边的外补丁距离，后一个长度将作为左、右边的外补丁距离；如果设置了3个长度，则第一个长度将作为上边的外补丁距离，第二个长度将作为左、右边的外补丁距离，第三个长度将作为下边的外补丁距离。
　　➢　margin-top：设置上边的外补丁距离。
　　➢　margin-right：设置右边的外补丁距离。
　　➢　margin-bottom：设置下边的外补丁距离。
　　➢　margin-left：设置左边的外补丁距离。

例子
<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title>轮廓相关属性测试</title>
    <style type="text/css">
        /* 设置div元素的宽度和高度 */
        div {
            width: 300px;
            height: 40px;
            border: 1px solid black;
        }
    </style>
</head>  
<body>  
margin:30px 50px;  
<div style="margin:30px 50px;">  
测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</div>
margin:10px 40px 10px 90px;  
<div style="margin:10px 40px 10px 90px;">  
测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</div>
</body>  
</html>