前言
因为我最开始是搞服务器端代码的，刚开始根本不看好CSS，甚至认为js抄一抄改一改就完了！由于这种错误的认识，所以CSS功底很水，曾经认为将图片做成页面是件很神奇的事情。
时至今日，我能轻易将一张图形成页面，我还能用js写出简单的插件，但有一个是没有变化的：
我依旧认为CSS很神奇！很难，比js难......
一方面是自己布局的项目经验不足，另一方面就是没有经过系统的学习，所以这块仍然是我的短板，是问题就需要突破，我不行但有人行！
我最近领悟了一个学习方法，针对某个问题，搜集几篇高质量文章阅读，然后吸收，做实验，形成文章！这样的学习效果我感觉针对还行！
所以这次用到我的短板CSS上试试！
引用资料
css margin的相关属性，问题及应用
css中padding、margin两个重要属性的详细介绍及举例说明
不要告诉我你懂margin
隆重介绍·张鑫旭
世界上有那么一种人，属于他不认识我，但我认识他，他影响着我，但他还是不认识我！其中张鑫旭就是这样一个人！
当我前段时间比较迷茫时，不经意间看见了他的博客，于是我便深深的爱上了他！因为从他的行文中，我感受到了我丢失的专注与细心，特别是他一句话点醒了我，我才为自己设立目标“两年成为国内优秀前端工程师”的目标，所以在此感谢旭哥，真乃指路明灯啊！
在此推荐其博客：http://www.zhangxinxu.com
盒模型 Box Model
要说margin，必定牵扯到盒模型，我这里不要脸的偷了两个图：
请大家注意看第一张图！这张图是我见过最棒的一张图了，他可以很好的解释块级元素中margin、padding、background等的关系，画图者神人也！
Margin是什么？
CSS边距属性定义元素周围的空间。通过使用单独的属性，可以对上右下左外边距进行设置。
元素周围生成的额外空白区，该空白区是指其它元素不能出现且父元素背景可见区域
上面的定义怎么读怎么绕口。。。但基本也就是这个意思，其实margin就是用来将元素隔开罢了。
现在我们来看看margin会为我们的网页带来些什么问题呢？
IE6双边距问题
产生条件：块级元素+float+margin
比如：当给父元素内第一个浮动元素设置margin-left（元素float:left）或margin-right（元素float:right）时margin加倍。
先上代码：
复制代码
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3 <title></title>
4 <style type="text/css">
5 .p { border: 1px solid black;}
6 .test { background: gray; margin: 10px; float: left;}
7 </style>
8 </head>
9 <body>
10 <div class="p">
11 <div class="test">
12 margin
13 </div>
14 <div style=" clear: both;"></div>
15 </div>
16 </body>
17 </html>
复制代码
本想简简单单做个试验就算了，结果一float我父级元素就“坍塌”了，这里还必须处理一番呢。
汗！由于我没有IE6，这里看不到bug图呢。。。这里只好又偷图了。。。
大概是以上样子，我们来看看各位大哥是怎么样解决的呢？
其中一位提到了原因：
块级元素设置浮动并对其设置外边距，就会出现这种情况，这种情况只会是第一个元素，后面就不会出现，原因是：
浮动时相对的，第一个元素对应于父对象而后对应于第一个对象，所以只有第一个会出问题。
为元素设置display: inline 可以解决这个问题，是因为inline或者inline-block元素不存在双边距问题。
而float: left可以让inline元素haslayout引发布局，支持高宽
PS：我感觉这个不像是原因而是解决的办法了。。。
最后我两位大哥对这个的解散都是一样的，其中旭哥稍微提了下少用float，这个问题便不了了之啦。。。
margin重叠问题
margin有这样一个属性，水平元素的margin是不会重合的，但是上下元素会发生重合，并且取较大者。
在漂浮框和其它框之间的垂直边距不重合//ie可以，其它不行
绝对定位框与相对定位框边距不重合//貌似也有问题
对以上问题，我有点迷糊......
这里要提到的是一个实际遇到的问题：
复制代码
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3 <title></title>
4 <style type="text/css">
5 body { background: #ECECEC; }
6 .outer { background: white; border: 1px solid #CCCCCC; width: 300px; }
7 .inner { margin: 10px; padding: 8px; background: none repeat scroll 0 0 #1C87D5; color: white;}
8 </style>
9 </head>
10 <body>
11 <div class="outer">
12 <h1 class="inner">
13 来个测试走</h1>
14 </div>
15 </body>
16 </html>
复制代码
若是我们将代码做一点改变：“将外层元素border”去掉；那么。。
大家发现，一旦缺少屏障，里面margin: 10px便没了。。。
所以我在想是不是可以直接给父元素设置一个padding: 1px便解决问题了
IE6 漂浮元素3px间距bug
当一个元素浮动，然后一个不浮动上浮与之靠近会出现3px的bug。
可以使用一起浮动，或者hack_margin-left: -3px解决，
这个也无法测试了。
结语
今日阅读就到这里，下次我们接着学习吧！！！
您可以考虑给小钗发个小额微信红包以资鼓励
本文转自叶小钗博客园博客，原文链接：http://www.cnblogs.com/yexiaochai/archive/2013/04/27/3047391.html，如需转载请自行联系原作者
