以来我都分不轻这两个属性的具体含义，所以今天查了下，终于算是明白了！
边距属性（margin）通常是设置一个页面中一个元素所占的空间的边缘到相邻的元素之间的距离，而间隙属性（padding）通常是设置一个元素中间的内容（或元素）到父元素之间的间隙（或距离）。对于边距属性（margin）有以下属性：
１）左边距属性（margin-left）：该属性用来设定左边距的宽度。
２）右边距属性（margin-right）：该属性用来设定右边距的宽度。
３）上边距属性（margin-top）：该属性用来设定上边距的宽度。
４）下边距属性（margin-bottom）：该属性用来设定下边距的宽度。
５）边距属性（margin）：该属性是设定边距宽度的一个快捷的综合写法，用该属性可以同时设定上下左右边距属性。
对于间隙属性，基本同边距属性，只是margin改为了padding，其属性如下所示。
１）左间隙属性（padding-left）：该属性用来设定左间隙的宽度。
２）右间隙属性（padding-right）：该属性用来设定右间隙的宽度。
３）上间隙属性（padding-top）：该属性用来设定上间隙的宽度。示例如下：
４）下间隙属性（margin-bottom）：该属性用来设定下间隙的宽度。示例如下：
５）间隙属性（padding）：该属性是设定间隙宽度的一个快捷的综合写法，用该属性可以同时设定上下左右间隙属性。
如图显示：
有种称法，padding是内补丁，margin是外补丁
一个示例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<style src="text/css">
.div1
{
float:left;
margin-left:20px; /*和左边元素距离为20px*/
background:white url('bg.jpg') repeat-x;
border:1px solid #ccc;
width:300px;
height:200px;
padding:30px; /*和外边的框上右下左增加30px*/
}
.div2
{
float:left;
margin-left:20px; /*和左边元素距离为20px*/
background:white url('bg.jpg') repeat-x;
border:1px solid #ccc;
width:300px;
height:260px;
}
.div3
{
background:white; /*背景为白色*/
}
//padding是间隙间隔
//margin是边距间隔
</style>
<body>
<div class="div1">
DIV1
<div class="div3">DIV3</div>
</div>
<div class="div2">DIV2</div>
</body>
</html>
944
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
