我们首先来搭建实验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属性的作用。