合理控制HTML的边界是一个网站布局的基础体现，在HTML中用CSS控制边界是常用的一种手段，今天我就来分享用CSS来控制HTML的边界，用CSS来设置元素和元素框以及元素框之间的距离。
工具/原料
1
内边距和外边距的基础知识
2
HTML基础知识
内边距
1CSS边界设置 如下图，可以看到一个红色的矩形框，里面有文字我热爱HTML，我爱CSS。
首先我们在HTML中创建一个长300px和宽200px的一个div块，设置背景颜色为红色，在这个块里插入一段文字，具体代码如下：
我热爱HTML，我爱CSS
2CSS边界设置 如下图，可以看到文字离上边距有50个像素。
如果我们需要文字离div上边界为50px，该怎么设计呢。我们知道文字在DIV这个标签中，离div这个上边距50px，具体代码如下：
我热爱HTML，我爱CSS
3CSS边界设置 可以看到，下面的文字上下左右都有间隔了。
除了可以设置上边界还可以设置四个边界的问题，这里我就来设置上下左右边界都为100px来说明。具体代码如下：
我热爱HTML，我爱CSS 我热爱HTML，我爱CSS 我热爱HTML，我爱CSS
4CSS边界设置 可以看到和刚才的执行效果是一样的。
除了用padding:100px;直接来设置上下左右边距为100像素外还可以用其他方式来设置，具体的代码如下：
我热爱HTML，我爱CSS 我热爱HTML，我爱CSS 我热爱HTML，我爱CSS
5CSS边界设置 具体效果，如下图所示。
设置了内边距的问题，我们还可以设置外边距来布局页面，我们发现新建的这个红色区域没有完全在浏览器的最左上角，在这里我就来设置使得我们新建的这个DIV在浏览器的最左上角，具体代码如下：
我热爱HTML，我爱CSS 我热爱HTML，我爱CSS 我热爱HTML，我爱CSS
6CSS边界设置 要设置上下左右的外边距为100px，首先我们给body的边距设置为0px，在用margin：100px就可以了，具体效果如下。
同样的我们也可以直接用margin:100px来设置div距上下左右为100px；
我热爱HTML，我爱CSS 我热爱HTML，我爱CSS 我热爱HTML，我爱CSS
注意事项
设置边界的时候注意相隔距离
上一篇：宫外孕是怎样引起的?
下一篇：HTML之CSS 边框与边界