CSS 彻底理解margin与padding

我们在刚开始接触CSS的时候总是被margin和padding闹的晕头转向，什么时候设置margin，什么时候设置padding，不是太清楚，设置了以后在界面上看到的效果也差不多呀。

如何理解margin与padding呀，我们首先可以想象一下我们手里拿了一个钻戒要向女朋友求婚，一般求婚的时候钻戒都是在盒子里放着呢，我们要有盒子的概念，钻戒一般都放在盒子的中央，没有哪家的钻戒是把盒子占的满满的，我们的钻戒就放在盒子的中央，占了很小的一块面积，其它的地方都是有填充物的，我们可以把这个填充物简单的理解为padding也就是钻戒距离盒子内边缘的距离，这时候我们想把钻戒放在桌子上，放在桌子的什么位置呢，左上角，右上角，还是中间，我们姑且把他放在中间把，那么我们这个钻戒盒子距离桌子边缘的距离就是margin，那么很简单我们那个钻戒的盒子就是我们所说的border。

钻戒.png

通过上面的图片我们就可以很直观的看出margin与padding的区别。

margin属性可以为给定元素设置所有四个（上下左右）方向的外边距属性。四个外边距属性设置分别是： margin-top， margin-right， margin-bottom 和 margin-left 。指定的外边距允许为负数。

1、指定一个值时 该值指定四个边到父内边距的距离

margin: 100px;

marginPadding1.png

2、指定两个值时 第一个值指定上下 第二个指定左右

margin: 100px 20px;

margin2.png

3、指定三个值时第一个指定上边、第二个指定左右两边、 第三个指定下边

margin: 100px 20px 10px;

margin3.png

4、指定四个值时分别为上 右 下 左（顺时针顺序）

margin: 100px 20px 10px 50px;

margin4.png

padding属性设置一个元素的内边距，padding 区域指一个元素的内容和其边界之间的空间，该属性不能为负值。四个外边距属性设置分别是： padding-top， padding-right， padding-bottom 和 padding-left

1、指定一个值时 该值指定内容到四个边的内边距

padding: 50px;

marginPadding1.png

2、指定两个值时 第一个值指定内容到上下两边的内边距 第二个指定内容到左右两边的内边距

padding: 50px 20px;

padding2.png

3、指定三个值时第一个指定内容到上边的内边距.第二个指定内容到左右两边 第三个指定内容到下边的距离

padding: 50px 20px 10px;

padding3.png

4、指定四个值时分别为上 右 下 左（顺时针顺序）

padding: 50px 20px 10px 5px;

padding4.png

以上的样式设定了这个控件的宽度为200px、高度为200px，在改变margin和padding时内容区的大小是不变的