三、常用的margin样式 - TOP

1、用margin设置对象盒子间距
我们常用margin设置2个盒子之间距离，无论上下左右的距离我们均可以利用margin实现间隔。


实际可用margin地方示图

2、利用margin实现布局居中，基础单词：
marign:0 auto;
即可实现对象居中，但需要一个条件，那就是该对象上级一定要设置text-align:center内容居中属性样式。有的浏览器body标签不设置text-align:center内容居中样式，其下级包含对象设置了margin:0 auto也会让其布局居中，但为了兼容各大浏览器建议对body设置一个text-align:center属性样式，这里divcss5提供一个css初始化模板为DIV CSS布局时候无需重复设置css text-align:center等初始化样式属性。
四、css margin普通案例 - TOP

DIVCSS5设置2个盒子，为了体现margin作用，我们对其2盒子设置css border边框、一定css宽度和css高度。

1、margin用法css代码
.divcss5-top,.divcss5-bottom{width:300px;height:100px;border:1px solid #F00}
.divcss5-bottom{ margin-top:10px}

2、html代码片段
<div class="divcss5-top">上对象</div>
<div class="divcss5-bottom">下对象，我们设置了margin-top为10px间距</div>

3、mairgin应用案例截图


margin实例实践案例效果图

从上案例我们分析出margin是设置对象（比如div盒子、span盒子等）之间间距，并体现出margin是存在与对象盒子边框外侧。
五、css margin总结 - TOP

Margin样式是设置对象与对象之间间距，单独设置一边的间距我们可以使用margin-left、margin-right、margin-top、margin-bottom样式属性，margin是设置盒子对象之间间距，一般设置时候注意margin简写优化。多实践并观察案例理解了margin作用即可很快上手使用margin。

margin缺点：
在使用CSS margin的时候容易造成CSS HACK。IE6解释此属性的时候容易造成双倍距离。
您可能需要了解CSS兼容浏览器知识。

你可以再了解以前divcss5介绍margin知识：http://www.divcss5.com/shili/s6.shtml。