深入理解margin

参考自http://www.hicss.net/do-not-tell-me-you-understand-margin/

CSS 边距属性定义元素周围的空间。通过使用单独的属性，可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。——W3School
边界，元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。——CSS权威指南

margin就是用来隔开元素之间的距离的这样一个属性。

margin的特性

margin始终透明

margin可以通过单独的属性来控制比如: margin-top, margin-right,margin-bottom,margin-left;

margin也可以通过简写来控制。如margin: 10px 0 20px 40px;
margin后面跟几个值就有几个不同的意思
* margin:10px 5px 15px 20px;代表上，右，下，左外边框
* margin:10px 5px 15px;代表上，右左，下外边框
* margin:10px 5px;代表上下，右左外边框
* margin:10px;代表上右下左外边框

margin的垂直外边距合并

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

垂直外边距合并的问题

第一个子元素的margin-top若是存在，如果父元素没有设置padding-top或者border-top,那么第一个子元素就会不断地向父元素的祖先寻找边界，知道寻找到为止。所以有的时候我们可能希望这样

但实际上结果却变成了这样

对于这种问题，我们只需要对父元素添加一个padding-top即可。当然给父元素添加一个border-top同样能够解决问题。

margin在块级元素和内联元素中的区别

magin在块级元素中可以设置其上下左右的外边距，但是在内联元素中，上下的外边距不起作用，只有左右的外边距起作用。

能够影响行高的属性只有font-size,line-height,vertical-align。

总结下来margin 属性可以应用于几乎所有的元素，除了表格显示类型（不包括 table-caption, table and inline-table）的元素，而且垂直外边距对非置换内联元素（non-replaced inline element）不起作用。

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

林林总总写了那么多，最后总结一些浏览器中常见的margin Bug吧，以后遇到margin下的布局问题可以查看这里找到解决的方案，如果你还发现其他关于浏览器下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 Hack _margin-left:-3px;从而消除3px间距。
原理分析：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。