css中margin和padding区别以及用途是什么？刚学css被这两个东西困扰了很久

一、margin属性

     CSS中的margin属性为给定元素设置所有四个（上下左右）方向的外边距属性。margin是四个外边距属性设置的简写。四个外边距属性设置分别是： margin-top， margin-right， margin-bottom 和 margin-left。margin 属性接受任何长度单位，可以是像素、英寸、毫米或 px。

    设置Margin属性的几种方式：

   1、同时设置给定元素的四个外边距

       //设置h1元素具有向上20px、向右30px、向下30px、向右20px的外边距。

h1 {

  margin-top: 20px;

  margin-right: 30px;

  margin-bottom: 30px;

  margin-left: 20px;

  }

这样是看上去是不是很复杂呢？前面我们介绍了margin属性是四个外边距属性设置的简写。所以我们可以将上面设置h1元素外边距的代码简写为：

h1{

margin: 20px 30px 30px 20px;

  }

       设置值的顺序是从上外边距开始围着元素顺时针旋转的器对应关系如下：

h1{

margin: top right bottom left;

}

2、margin属性中不一定必须要传入四个属性值，它分为一下几种情况：

· 只有一个  值时，这个值会被指定给全部的 四个边。

· 两个 值时，第一个值被匹配给 上和下, 第二个值被匹配给 左和右。

· 三个 值时，第一个值被匹配给 上, 第二个值被匹配给 左和右, 第三个值被匹配给 下。

· 四个 值时，会依次按 上、右、下、左 的顺序匹配 (即顺时针顺序)。

示例如下：

h1{margin: 1px;}//等价于 h1{1px 1px 1px 1px}

h1 {margin: 0.5px 1px;}// 等价于 h1{0.5px 1px 0.5px 1px }

h1 {margin: 0.25px 1px 0.5px;}//等价于h1{ 0.25px 1px 0.5px 1px}

3、设置单边或多边外边距的语法

//设置向上外边距为20px。

h1{margin-top: 20px;}

//设置上外边距和左外边距均为20px

h1{margin-top: 20px; margin-left: 20px;}

二、padding属性

     padding属性则是设置给定元素内边距的属性，它和margin属性一样也是四个内边距属性的简写，四个内边距属性分别是：padding-top、padding-right、padding-bottom、padding-left。它的使用方法与margin属性的使用方法也是相类似的，这里就不再说明了。

三、padding属性和margin属性的区别

    padding属性和margin属性的区别这就涉及到了CSS中的盒模型了。下图是一个盒模型的图示。当你的浏览器展现一个元素时，这个元素会占据一定的空间。这个空间由四部分组成。中间是元素呈现内容的区域。这个区域的外面是内边距。再外面是边框。最外面的是外边距，外边距将该元素与其它元素分开。padding属性是设置是内容框与边框之间的距离的属性，而margin属性则是设置元素外边框与其他元素的距离。这就是他们的区别。这些内容都是属于CSS中的基础知识。在一个叫做秒秒学的网中有相关的介绍，有兴趣可以看看。

磕氖加工厂谒