margin相关基本知识

什么是 margin ?

CSS 边距属性定义元素周围的空间。经过使用单独的属性，能够对上、右、下、左的外边距进行设置。也可使用简写的外边距属性同时改变全部的外边距。——W3School

边界，元素周围生成额外的空白区。“空白区”一般是指其余元素不能出现且父元素背景可见的区域。——CSS权威指南

概述

margin属性为给定元素设置全部四个（上下左右）方向的外边距属性。这是四个外边距属性设置的简写。四个外边距属性设置分别是： margin-top， margin-right， margin-bottom 和 margin-left 。指定的外边距容许为负数。

语法

margin : [ <length> | <percentage> | auto ]{1,4}
    

取值

margin 可取1~4个值,值类型以下

length

指定一个固定的宽度。能够为负数

percentage

百分比相对于该元素的包含块的宽度（相对于该块的百分比）。该值能够为负数。

auto

浏览器会自动选择一个合适的margin来应用。它能够用于将一个块居中。

• 只有一个 值时，这个值会被指定给所有的 四个边.
• 两个 值时，第一个值被匹配给 上和下, 第二个值被匹配给 左和右.
• 三个 值时，第一个值被匹配给 上, 第二个值被匹配给 左和右, 第三个值被匹配给 下.
• 四个 值时，会依次按 上、右、下、左 的顺序匹配 (即顺时针顺序).

特性

margin始终是透明的(父元素设置背景, margin区域可见的)

参考线

在margin属性中一共有两类参考线，top和left的参考线属于一类，right和bottom的参考线属于另外一类。top和left是之外元素为参考，right和bottom是以元素自己为参考。margin的位移方向是指margin数值为正值时候的情形，若是是负值则位移方向相反。

总结：

1: margin-top和 margin-left 值得偏移相对于相邻元素margin或border; 若是没有相邻元素则包含容器的content边为及基准

2: margin-bottom和 margin-right 相对于自身进行偏移

常见的问题

垂直外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将造成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

合并几种状况 W3Shool CSS外边距合并

• 相邻元素间的合并
• 包含元素间的合并(假设没有内边距或边框把外边距分隔开)
• 元素自身的合并(空元素，它有外边距，可是没有边框或填充padding)

margin在块元素、内联元素中的区别

margin 在块级元素下, 他的特性能够彻底体现, 上下左右任你设定。

margin也能用于内联元素,这是规范所容许的 margin的top和bottom属性对非替换内联元素无效, 例如<span>和<code>。

常见的浏览器下margin出现的bug

IE6中双边距Bug：

发生场合：当给父元素内第一个浮动元素设置margin-left（元素float:left）或margin-right（元素float:right）时margin加倍。

解决方法：是给浮动元素加上display:inline;CSS属性；或者用padding-left代替margin-left。

原理分析：块级对象默认的display属性值是block，当设置了浮动的同时，还设置了它的外边距就会出现这种状况。也许你会问：“为何以后的对象和第一个对象之间就不存在双倍边距的Bug”？由于浮动都有其相对应的对象，只有相对于其父对象的浮动对象才会出现这样的问题。第一个对象是相对父对象的，而以后对象是相对第一个对象的，因此以后对象在设置后不会出现问题。为何display:inline能够解决这个双边距bug，首先是inline元素或inline-block元素是不存在双边距问题的。而后，float:left等浮动属性可让inline元素haslayout，会让inline元素表现得跟inline-block元素的特性同样，支持高宽，垂直margin和padding等，因此div class的全部样式能够用在这个display inline的元素上。

IE6中浮动元素3px间隔Bug：

发生场合：发生在一个元素浮动，而后一个不浮动的元素天然上浮与之靠近会出现的3px的bug。

解决方法：右边元素也一块儿浮动。

原理分析：IE6浏览器缺陷Bug。

IE6/7负margin隐藏Bug：

发生场合：当给一个有hasLayout的父元素内的非hasLayout元素设置负margin时，超出父元素部分不可见。

解决方法：去掉父元素的hasLayout；或者赋hasLayout给子元素,并添加position:relative;

原理分析：IE6/7独有的hasLayout产生问题。

IE6/7下ul/ol标记消失bug：

发生场合：当ul/ol触发了haslayout而且是在ul/ol上写margin-left，前面默认的ul/ol标记会消失。

解决方法：给li设置margin-left，而不是给ul/ol设置margin-left。

原理分析：IE6/7浏览器Bug

IE6/7下margin与absolute元素重叠bug：

发生场合：双栏自适应布局中，左侧元素absolute绝对定位，右侧的margin撑开距离定位。在IE6/7下左侧应用了absolute属性的块级元素与右边的自适应的文字内容重叠。

解决方法：把左侧块级元素更改成内联元素，好比把div更换为span。

原理分析：这是因为IE6/IE7浏览器将inline水平标签元素和block水平的标签元素没有加以区分一视同仁渲染了。属于IE6/7浏览器渲染Bug。

IE6/7/8下auto margin居中bug：

发生场合：给block元素设置margin auto没法居中

解决方法：出现这种bug的缘由一般是没有Doctype，而后触发了ie的quirks mode，加上Doctype声明就能够了。在《战胜IE的葵花宝典》里给出的方法是给block元素添加一个width可以解决，但根据本人亲测，加with此种方法是无效的，若是没有Doctype即便给元素添加width也没法让block元素居中。

原理分析：缺乏Doctype声明。

IE8下input[button | submit] 设置margin:auto没法居中

发生场合：ie8下，若是给像button这样的标签（如button input[type="button"] input[type="submit"]）设置{ display: block; margin:0 auto; }若是不设置宽度的话没法居中。

解决方法：能够给为input加上宽度

原理分析：IE8浏览器Bug。

IE8百分比padding垂直margin bug：

发生场合：当父元素设置了百分比的padding，子元素有垂直的margin的时候，就好像父元素被设置了margin同样。

解决方法：给父元素加一个overflow:hidden/auto。

原理分析：IE8浏览器Bug。

参考

海玉 W3C