margin属性,margin属性值
【css】外边距margin的属性和使用方法
外边距很好理解，就是指边框以外的距离，可以表示和其它元素之间的距离，使用margin属性来设置。
margin后面可跟多个值，中间用空格分离，含义如下：
（1）首先我们放置三个盒子，颜色不同，宽高均为100px。
（2）我们给中间的橙色盒子加上一个10px的上外边距，可以看到橘黄色的盒子向下移动了10px，上面多了一个上外边距。
（3）接下来我们去掉上外边距，改成给橘黄色盒子加上一个10px的下外边距，发现橘黄色盒子并没有移动，移动的是下面的黄色盒子，所以margin-top和margin-bottom的用法一定要区分开。
（4）外边距可以是赋值，我们给橘黄色盒子添加一个-50px的上外边距，可以看到橘黄色盒子向上移动了。
（1）我们放置一个大的红色盒子，里面包着一个小的橘黄色盒子，当我们为橘黄色盒子添加了一个50px的上外边距的时候，本来应该只是小盒子多了上外边距然后导致向下移动。结果发现，效果就好像是给大盒子加了上外边距一样，大盒子跟着小盒子一起塌陷下去了，并不是我们想要的效果。
（2）如果大盒子有边框，或者橘黄色盒子上面还有元素，情况会是正常的，可以达到我们想要的效果，不会出现塌陷：
（3）解决方法
在外部元素上面没有边框，其内部上方也没有其它元素挡着的时候，给其子元素设置上外边距，会导致塌陷，达不到想要的效果。目前我们只能在遇到这种情况的时候尽量使用padding去设置，不要使用margin，当然还有很多别的解决方法，就不细说啦。
我们放置两个盒子，给上面的盒子添加一个100px的下外边距，给下面的盒子添加一个50px的上外边距，最终效果如图所示，两个盒子最后中间只隔了100px：
当下方元素的上外边距遇到上方元素的下外边距，是会发生重合效果的，设置的时候一定要注意。
块元素才可以设置上下左右外边距，内联元素设置上下外边距是无效的。
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中的基础知识。在一个叫做秒秒学的网中有相关的介绍，有兴趣可以看看。
margin和padding属性的区别
margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。
这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。
注释：允许使用负值。
border 简写属性在一个声明设置所有的边框属性。
可以按顺序设置如下属性：
border-width边框宽度；
border-style边框样式；
border-color边框颜色。
padding 简写属性在一个声明中设置所有内边距属性。
这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。
注释：不允许使用负值。
深入理解margin属性
1 .盒子尺寸:border box。从boder 往里算原生api 是offsetWidth
2 .盒子内部尺寸：padding box。从padding往里算。原生dom api是clientWidth
3 .盒子外部尺寸:margin box。从margin往里算.没有原生的dom api
1 .如果元素有宽度，并且是块级元素.此时添加margin:元素的宽度不会发生改变
2 .父元素宽度不变，如果元素是块级，并且宽度没有给，那么margin的宽度会发生变化
3 .元素margin在垂直方向上无法改变自身的内部尺寸，往往需要父元素作为载体
1 .图片右侧定位的时候，只需要把图片的左浮动改成右浮动
1 .上面这样处理的结果就是最右边一个会有20px的空格,虽然有其他不同的解决方法，但是这里用margin的写法
2 .给ui加20px的宽度，对冲掉最后一个的20px的宽度.
3 .但是他这里说的都是float下的问题，不是不推荐使用float布局了么。。
1 .只要元素是块状元素，无论有没有设置宽高，无论是水平还是垂直方向，即使发生了margin合并，margin对外部尺寸都实实在在的发生了变化
2 .内联元素，完全无影响，不论是垂直方向，还是左右方向，不论是外部还是内部尺寸。但是加了margin还是会有间距显示的
1 .使用padding-bottom实现留白有兼容性问题，因为不同的浏览器实现滚动的逻辑是不一样的，chrome以content box为基准算是否触发滚动条，ie和firefox则是超过padding box尺寸触发滚动条。
2 .所以这种情况下直接使用margin-bottom，完全没有兼容问题
1 .两个的宽度以最多的一个为基准，算高的。但是这个css也太狰狞了吧。flex直接实现，天然支持
2 .实现原理:margin-bottom：-9999px先给外部尺寸在垂直方向减小9999px。padding-bottom：9999px又增加了元素高度，抵消了刚才的，对布局没有影响，但是带来了多的的9999px的可使用背景色.多了这个多的可使用背景色，于是父元素overflow:hidden；消除了多余的颜色。这谁想出来的。。最关键的是这种方法兼容性超级强，ie6,ie7
1 .和padding一样，也是相对于元素的宽度计算的.
2 .还是不要使用百分比算了，随便一调一个属性就是一个新的表现。完全解释不了啊.一定要走宽阔的大路
1 .必须知道的知识
2 .填充规则1：如果一侧是固定值，一侧是auto，则auto为剩余空间大小
可以看到，没有margin-left的时候，虽然有了margin-right。但是是不生效的，因为流式布局先从左边走
3 .填充规则2 ：两侧都是auto，平分固定值。这不是规则1 的特殊情况么。。
1 .首先发现设置margin:auto;左右方向会自动居中，但是上下是无效的.容器定高，容器定高为啥不行呢。
2 .甚至发现如果单独给他添加margin-top：还会发生边距折叠，给父元素加上了
3 .margin实现元素居中
1 .display:inline计算值的非替换元素的垂直margin是无效的,虽然规范提到有渲染，但是浏览器表现的无迹可寻
可以看到，有margin值，但是效果表现是无效的
2 .表格中的tr，td元素或者设置display:table-cell,table-row的margin都是无效的
3 .绝对定位的非定位方位的margin值无效
4 .高度确定父元素下子元素的margin-bottom。或者宽度确定的父元素下子元素的matgin-right失效。
本质是，如果想要margin改变自己的位置，那么必须是当前元素定位一样的方向才可以，否则就只会影响到其他兄弟元素，所以看图下一个的元素是明确可以看到被影响到了
5 .鞭长莫及的margin无效
6 .内联特性导致的margin无效
确实会在只剩一个屁股的时候不在上移动，不论负值多么变大，但是这个是父元素没有任何属性，加了一个absolute之后就不是这样了，没有这个限制了
1 .内联替换元素,垂直margin是有效的，比如照片是一定是可以的，并且不会发生margin合并
2 .如果计算值是table-caption,table或者inline-table则没有此问题
1 .block元素，可以使用四个方向的margin值
2 .inline元素，只可以使用左右方向的margin值
3 .inline-block匀速，使用上下方向的值看起来是无效的，其实是和vertial-align的值有关系
1 .两个block元素重叠时，后面元素可以覆盖前面元素的背景。但是无法覆盖内容，也就是内容是一起显示的
2 .两个inline,两个inline-block，inline和inline-block元素重叠时，后面元素会覆盖前面元素
可以看到后面的覆盖了前面的
3 .inline元素和block元素，inline覆盖block的背景，内容的话，是后面的覆盖前面的内容
4 .最后，在浏览器不居中，浏览器将页面布局分为内容和背景，内容的层叠始终高于背景，block元素分为内容和背景，而inline元素或inline-block元素，本身就是内容