CSS边界教程之padding和margin的详细教程
1、首先我们在HTML中创建一个长300px和宽200px的一个div块，设置背景颜色为红色，在这个块里插入一段文字，具体代码如下：
<html>
<head>
<title>CSS边界设置</title>
<style type="text/css">
.divcss{
height:200px;
width:300px;
background-color:red;
}
</style>
</head>
<body>
<div class="divcss">
我热爱HTML，我爱CSS
</div>
</body>
</html>
如下图，可以看到一个红色的矩形框，里面有文字我热爱HTML，我爱CSS。
2、如果我们需要文字离div上边界为50px，该怎么设计呢。我们知道文字在DIV这个标签中，离div这个上边距50px，具体代码如下：
<html>
<head>
<title>CSS边界设置</title>
<style type="text/css">
.divcss{
height:200px;
width:300px;
background-color:red;
padding-top:50px;
}
</style>
</head>
<body>
<div class="divcss">
我热爱HTML，我爱CSS
</div>
</body>
</html>
如下图，可以看到文字离上边距有50个像素。
3、除了可以设置上边界还可以设置四个边界的问题，这里我就来设置上下左右边界都为100px来说明。具体代码如下：
<html>
<head>
<title>CSS边界设置</title>
<style type="text/css">
.divcss{
height:200px;
width:300px;
background-color:red;
padding:100px;
}
</style>
</head>
<body>
<div class="divcss">
我热爱HTML，我爱CSS
我热爱HTML，我爱CSS
我热爱HTML，我爱CSS
</div>
</body>
</html>
可以看到，下面的文字上下左右都有间隔了。
4、除了用padding:100px;直接来设置上下左右边距为100像素外还可以用其他方式来设置，具体的代码如下：
<html>
<head>
<title>CSS边界设置</title>
<style type="text/css">
.divcss{
height:200px;
width:300px;
background-color:red;
padding-top:100px;
padding-left:100px;
padding-right:100px;
padding-bottom:100px;
}
</style>
</head>
<body>
<div class="divcss">
我热爱HTML，我爱CSS
我热爱HTML，我爱CSS
我热爱HTML，我爱CSS
</div>
</body>
</html>
可以看到和刚才的执行效果是一样的。
5、设置了内边距的问题，我们还可以设置外边距来布局页面，我们发现新建的这个红色区域没有完全在浏览器的最左上角，在这里我就来设置使得我们新建的这个DIV在浏览器的最左上角，具体代码如下：
<html>
<head>
<title>CSS边界设置</title>
<style type="text/css">
.divcss{
height:200px;
width:300px;
background-color:red;
}
body{margin-top:0px;
margin-left:0px;
}
</style>
</head>
<body>
<div class="divcss">
我热爱HTML，我爱CSS
我热爱HTML，我爱CSS
我热爱HTML，我爱CSS
</div>
</body>
</html>
具体效果，如下图所示。
6、同样的我们也可以直接用margin:100px来设置div距上下左右为100px；
<html>
<head>
<title>CSS边界设置</title>
<style type="text/css">
.divcss{
height:200px;
width:300px;
background-color:red;
margin:100px;
}
body{margin-top:0px;
margin-left:0px;
}
</style>
</head>
<body>
<div class="divcss">
我热爱HTML，我爱CSS
我热爱HTML，我爱CSS
我热爱HTML，我爱CSS
</div>
</body>
</html>
要设置上下左右的外边距为100px，首先我们给body的边距设置为0px，在用margin：100px就可以了，具体效果如下。
