CSS边界(margin)——CSS实验室

我们首先来搭建实验margin的平台，一个p元素。点击下面的按钮以将这个p元素“圈出来”。 在p的外面还套着一个div，再点击下面的按钮将它圈出来。

CSS顶部边界：margin-top

通过设置CSS中的margin-top属性，我们可以设置元素的顶部边界。点击下面的按钮给元素设置一个5像素的顶部边界，看看实验的p元素会有什么变化。

margin-top:5px;

设置完顶部边界之后，我们发现p的顶部与div的距离反而变小了，这是因为默认情况下，p的上下是有margin的。

CSS底部边界、左侧边界、右侧边界

与顶部边界的道理是一样的，我们同样可以通过CSS的margin-bottom、margin-left、margin-right属性分别设置底部、左侧、右侧边界。可以点击下面的三个按钮实验一下。

margin-bottom:5px;

margin-left:5px;

margin-right:5px;

CSS边界：margin

与前面的缩略属性类似，我们可以一次指定所有方向的边界。只需要设置一个margin属性即可。点击下面的按钮给我们的实验p设置10像素的边界。

在设置margin属性的时候，我们会发现段落的边框与div的边框之间有了我们所指定的距离，这就是margin属性的作用。