点此查看 所有教程、项目、源码导航
1. 前言
要理解外边距，先来说一下外边。
物体的外边，指的就是外围的边界，对网页元素来说，外边就是元素最外面的边界。
那么外边距，就是一个物体的外边，与另一个物体的外边的距离。
CSS之中，通过margin来设定元素的外边距，本篇就来说明下用法。
2. 默认情况
先看代码：
<body>
<input type="button" value="按钮1">
<input type="button" value="按钮2">
<br>
<input type="button" value="按钮3">
<input type="button" value="按钮4">
</body>
效果如下：
从上述效果可以看出，默认情况下，元素之间的边距很小，排列非常紧凑，这也会导致从界面效果上看密密麻麻，不够美观。
3. 设置外边距
可以通过margin-left/margin-right/margin-top/margin-bottom分别设定元素的左、右、上、下边距。
我们为按钮1设置一个id:
<body>
<input type="button" value="按钮1" id="button1">
<input type="button" value="按钮2">
<br>
<input type="button" value="按钮3">
<input type="button" value="按钮4">
</body>
然后通过id选择器选中该元素，为其设置CSS样式：
#button1 {
margin-left: 100px;
margin-right: 200px;
margin-top: 30px;
margin-bottom: 30px;
}
上述代码，将按钮1的左边距设为了100px，右边距设为了200px，上下边距设为了30px，所以效果如下：
我们可以看到，按钮1距离左外边距变大了100px，右外边距变大了300px，上下外边距变大了30px。
4. 简写属性
可以通过以下方式，简化外边距的写法：
/* 上下左右边距均设置为10px */
margin: 10px;
/* 上下10px 左右20px */
margin: 10px 20px;
/* 上、右、下、左分别为1px 2px 3px 4px */
margin: 1px 2px 3px 4px;
也就是说，当只写一个值时，代表同时为4个边设置同样的边距。
当写两个值时，第一个值代表上下边距，第二个值代表左右边距。
当同时写了4个值时，分别代表上、右、下、左四个边距，也就是从上开始，顺时针的顺序。
5. 小结
在网页设计开发过程中，外边距的使用相当频繁，所以本节内容还是需要在理解的基础上多加练习。
2131
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
