无意中在蓝色理想中看到一篇《不要告诉我你懂margin》，有感，写出来的。对于作者致敬，请大家帮忙指正。

你真的了解margin吗？你知道margin有什么特性吗？你知道什么是垂直外边距合并？margin在块元素、内联元素中的区别？什么时候该用 padding而不是margin？你知道负margin吗？你知道负margin在实际工作中的用途吗？常见的浏览器下margin出现的bug有哪些？……（引用作者原话）

我们写css免不了的要与margin这个属性打交道，而且有的时候还要借助margin来修复因IE的bug，margin是外边距，我们都知道的。我给它的定义是：他具体的作用是对父元素的边框内出现距离本身的距离定义。css权威指南是这样说的：边界，元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。w3cschool则是：CSS 边距属性定义元素周围的空间。通过使用单独的属性，可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。

大家已经明白了我对它的称呼——外边距，接下来以外边距来称呼。

margin的特性（盗用作者标题）

margin，是透明的，在它设置的值的范围内，父元素的背景色或背景图片均不受影响，能够完整的呈现给用户看到。margin属性通过单独的属性对其上、右、下、左依次进行赋值，我们常见的有margin:10px; OR margin:10px 20px; OR margin:10px 20px 10px 20px;但是你知道：margin:10px 15px 3px;什么意思吗？你以为它的表达意思是：margin:10px 15px 3px 0px;吗？？那我来告诉你，错误：它的表达意思是margin:10px 15px 3px 15x;呵呵！great。这个才是正确的。在实际应用中，或者阅读别人代码的时候不要理解错误或者，没有看到过这个，就随便猜测作者的想法。

margin垂直外边距不兼容标准？

实际工作中，垂直外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，而且只在标准浏览器下 (FirfFox、Chrome、Opera、Sarfi)产生问题，IE下反而表现良好。例子可以查看下面代码(IE下表现“正常”，标准浏览器下查看出现“bug”)有代码有真相：

你来运行一下是不是感觉，这个在IE中显示正常？而在其他对css2高度兼容的firefox下显示异常？？我来告诉你，这是因为IEIE的hasLayout渲染导致了这个“表现良好”的外观。而其他标准浏览器则会表现出“有问题”的外观。如果按照css规范来说，IE的表现是错误的，而FirfFox、Chrome、Opera、Sarfi等主流浏览器则解析的符合css规范。

举个例子来说：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己 “领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级，假传圣旨，把自己的margin当领导的margin执行（虽然它的值比“真龙”的值大）。

用Margin还是用Padding

对于这个问题，很多人问过我，他们说，padding和margin为什么要分开用，它们的区别也不大，达到的效果也不差，为什么它们是两种定义？很多人会容易弄混淆，特别是新手，一般都是新手问我这个问题。

下面我们来说下，为什么要区别来用，padding和margin：

当我们想要在子元素使用背景，而父元素不适应背景，达到图片“顶住”，文字“不顶住”间隔一段距离的时候要用padding；

当我们让子元素边框要顶住父元素，而覆盖父元素背景图片或背景色的时候使用padding；

当我们希望让子元素和父元素有点距离，但不影响父元素背景图片展示的时候用margin；

当子元素有边框而父元素无边框的时候，它们需要产生距离的时候用margin；

margin在内联元素中的表现也是同理。以上为我对margin属性的理解，还有一个margin的bug我就不在这里阐述了，因为网上已经有很多有识之士，把margin的bug详细的列了出来。在这里，向大家祝福，端午节快乐！

（喜欢学习的和想与我探讨各种web知识的留下你的邮箱或联系方式，或者跟我发邮件747850255@qq.com转载请自觉附上转载地址，来自博客园“明年开奥迪”)