margin上下左右顺序(margin上下重叠)
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中的基础知识。在一个叫做秒秒学的网中有相关的介绍，有兴趣可以看看。
CSS的盒模型中,Margin属性的数值赋予顺序为()？
如果后面1个值，四个方位边距都统一是这个
如果后面是2个值，第1个表示上下，第2个表示左右
如果后面是3个值，第1个表示上，第2个表示左右，第3个表示下
如果后面是4个值，则分别是上 右 下 左
padding和margin的数值设置方式
?padding也是复合属性 padding:20px 上右下左都是20px?
?顺序是按照 上右下左的顺序来设置的（padding: 20px 15px 10px 5px;?）
?分开设置： padding-top:20px;
? ? ? ? ? ? ? ? ? ? padding-right:15px;
? ? ? ? ? ? ? ? ? ? padding-bottom: 10px;
? ? ? ? ? ? ? ? ? ? padding-left:5px;
?下面的会把上面的属性值覆盖： padding:20px;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? padding-top:40px;?
?padding:10px 20px 15px：（?上10px ?左右20px 下15px）? ? ?
上下 10px 左右 20px ：（?padding:10px 20px;）
上右下左的外边距都是30px ：margin:30px
上边距30 左右20 下40 ：（?margin:30px 20px 40px;）
上下10 左右30 ：（? margin:10px 30px;?）
也可以分开写：margin-top: 10px;
? ? ? ? ? ? ? ? ? ? ? ? ?margin-right: 20px;
? ? ? ? ? ? ? ? ? ? ? ? ?margin-bottom: 30px;?
margin可以给负值，会超出边界 ：?margin-left: -40px;
下面的会把上面相同属性的值覆盖 ：margin:30px;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?margin-left:-30px;?
在网页制作中margin是什么意思,为什么后面还要跟个0？
默认情况下，html标签都有margin属性外边距，如果不设置0，会有间距不好看，为了清理这个默认的间距，所有需要给元素设置css属性margin:0
margin:0 为简写，意思是上下左右全部设置外边距为0，如果要设置右间距为10px，其它方向为0
可以这么设置 margin:0 10px 0 0 意思为 上外边距为0 右外边距为10px 下外边距为0 左外边距为0
写到这里应该明白了吧 margin简写顺序为 上 右 下 左
更多教程：lanye.org
请margin:-2em 0 0 0;什么意思？？？
说明： 检索或设置对象四边的外延边距。 如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。 如果只提供一个，将用于全部的四边。 如果提供两个，第一个用于上－下，第二个用于左－右。 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。 内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。 在IE4+，margin属性不可用于td和tr对象。 外延边距始终透明。 对应的脚本特性为margin。 关于对象的尺寸与边框，内外补丁等样式表属性的关系，请参看图例以及height和width属性。 示例： body { margin: 36pt 24pt 36pt 24pt; }，即上下36，左右24 body { margin: 11.5%; }，即上下左右都是11.5% body { margin: 10% 10% 10% 10%; } ，即上下左右都是10%，表达方式和上一种相同