我们在刚开始接触CSS的时候总是被margin和padding闹的晕头转向,什么时候设置margin,什么时候设置padding,不是太清楚,设置了以后在界面上看到的效果也差不多呀。
![1cd69bd7f60e5781d3f6003b32b448b8.png](https://i-blog.csdnimg.cn/blog_migrate/2b79840946cfc1fef4a6a7965419cfdf.jpeg)
如何理解margin与padding呀,我们首先可以想象一下我们手里拿了一个钻戒要向女朋友求婚,一般求婚的时候钻戒都是在盒子里放着呢,我们要有盒子的概念,钻戒一般都放在盒子的中央,没有哪家的钻戒是把盒子占的满满的,我们的钻戒就放在盒子的中央,占了很小的一块面积,其它的地方都是有填充物的,我们可以把这个填充物简单的理解为padding也就是钻戒距离盒子内边缘的距离,这时候我们想把钻戒放在桌子上,放在桌子的什么位置呢,左上角,右上角,还是中间,我们姑且把它放在中间吧,那么我们这个钻戒盒子距离桌子边缘的距离就是margin,那么很简单我们那个钻戒的盒子就是我们所说的border。
![6d33f06af983c807b661c1682a90bddd.png](https://i-blog.csdnimg.cn/blog_migrate/3509736cd4e6f22d985bd37a2d74a030.jpeg)
钻戒
通过上面的图片我们就可以很直观的看出margin与padding的区别。
margin属性可以为给定元素设置所有四个(上下左右)方向的外边距属性。四个外边距属性设置分别是: margin-top, margin-right, margin-bottom 和 margin-left 。指定的外边距允许为负数。
1、指定一个值时 该值指定四个边到父内边距的距离
margin: 100px;
![cd39b3df7f1166765f66baf040ec1b13.png](https://i-blog.csdnimg.cn/blog_migrate/0533a0173f64f7e1455b578ca0f748ea.jpeg)
2、指定两个值时 第一个值指定上下 第二个指定左右
margin: 100px 20px;
![01eb80731974d904182b8592cb26ee90.png](https://i-blog.csdnimg.cn/blog_migrate/b66e285e306086282889cf2e83ff4d76.jpeg)
3、指定三个值时第一个指定上边、第二个指定左右两边、 第三个指定下边
margin: 100px 20px 10px;
![f631d4b04f3013e5ad2a1a693232bac9.png](https://i-blog.csdnimg.cn/blog_migrate/4c2b0c190bb46aa9e7144a96116c2020.jpeg)
4、指定四个值时分别为上 右 下 左(顺时针顺序)
margin: 100px 20px 10px 50px;
![418796f8a2f3ec38b54af3a8fc6426e5.png](https://i-blog.csdnimg.cn/blog_migrate/b8d19034bf100c23d9e7d440d12b8fb2.jpeg)
padding属性设置一个元素的内边距,padding 区域指一个元素的内容和其边界之间的空间,该属性不能为负值。四个外边距属性设置分别是: padding-top, padding-right, padding-bottom 和 padding-left
1、指定一个值时 该值指定内容到四个边的内边距
padding: 50px;
![8b37c2c75bf6e4c5eeb7d2ae59fd3964.png](https://i-blog.csdnimg.cn/blog_migrate/1be329bf1f629202bd3815b3c3803e10.jpeg)
2、指定两个值时 第一个值指定内容到上下两边的内边距 第二个指定内容到左右两边的内边距
padding: 50px 20px;
![5e0d524a6b1f725e5c141bee11dfe284.png](https://i-blog.csdnimg.cn/blog_migrate/dff0fe281d7b9a7bf2307fc8df801e7c.jpeg)
3、指定三个值时第一个指定内容到上边的内边距.第二个指定内容到左右两边 第三个指定内容到下边的距离
padding: 50px 20px 10px;
![9efa202b6f1ee4e4322f959a2de82edf.png](https://i-blog.csdnimg.cn/blog_migrate/34e6b5369dd1abf9d03b9a4b620660b6.jpeg)
4、指定四个值时分别为上 右 下 左(顺时针顺序)
padding: 50px 20px 10px 5px;
![9b0860624a451cf55d7743fef73cb2d9.png](https://i-blog.csdnimg.cn/blog_migrate/eb5bccca458a96a2798c33a9c81cfd2e.jpeg)
以上的样式设定了这个控件的宽度为200px、高度为200px,在改变margin和padding时内容区的大小是不变的