在css中margin和padding经常一起使用，多数情况下他们实现相同的效果。在一个块级元素中，margin指块级元素的外边距，padding指块级元素的内边距。
对margin一些简单使用本文不做介绍，下面我将罗列一些margin使用中容易混淆或者容易春错的地方。
1.垂直外边距合并问题
简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。这就是经常说的margin重叠。
2.第一个子元素的margin-top问题
这是实际工作经常碰到的一个问题，第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，而且只在标准浏览器下(FirfFox、Chrome、Opera、Sarfi)产生问题，IE下反而表现良好。如果按照CSS规范，IE的“良好表现”其实是一个错误的表现，因为IE的hasLayout渲染导致了这个“表现良好”的外观。
这个问题发生的原因是一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。也就是说，父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的向上找。
解决方法就是给父级元素设置个有效的 border-top或者padding-top就可以了。这么写当然能解决问题，不过感觉很奇怪，为了写一个margin-top，就强制个给父级元素加一个 border-top或者padding-top。与其这样，还不如直接设置成padding-top。那什么时候该用margin，什么时候用padding？
3.用margin还是用padding
何时应当使用margin：
- 需要在
border外侧添加空白时； - 空白处不需要背景（色）时；
- 上下相连的两个盒子之间的空白，需要相互抵消时。如15px + 20px的margin，将得到20px的空白。
何时应当时用padding：
- 需要在border内测添加空白时；
- 空白处需要背景（色）时；
- 上下相连的两个盒子之间的空白，希望等于两者之和时。如15px + 20px的
padding，将得到35px的空白。
4.margin在块元素、内联元素中的区别
margin在块级元素下，他的性能可以完全体现。
margin在行内块级元素下，也是有效果的，但是margin-top和margin-bottom对内联元素（对行）的高度没有影响。
margin在inline元素中的效果跟行内块级元素下效果一致。
5.负margin技术及其应用
许多高级应用和页面上的疑难杂症都可以用负margin技术来实现。
http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html
6.常见的浏览器下margin出现的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。
网友评论