margin

margin呈现于边框外侧，padding呈现于边框内侧。
margin:0 auto即可实现内容的居中，为了在各大浏览器的支持，最好在父级写上text-align:center;
（1）margin-top 无效
两个div，其中一个浮动，另一个没有浮动
<div class="box1">float:left</div>
<div class="box2">clear:both; margin-top:20px;</div>
此时的margin-top没有起任何作用；
网上能找到的两种比较靠谱的解释：
1：“在CSS2.1中，水平的margin不会被折叠；垂直margin可能在一些盒模型中被折叠…”
2：当第一个层浮动，而第二个没浮动层的margin会被压缩。
解决方案：
一起浮动，或者一起不浮动；
1.给box2添加float;
2.给box1和box2之间添加一层”<divstyle=“clear:both;"></div>"，即给它加一个正常文档流的盒子；
（2）子元素设置margin-top作用于父容器
<div class="box"> 
<div class="box1">
</div>
</div>
.box{width: 300px;height: 100px;background: #fb3;}
.box1{width: 250px;height: 50px;background: red;margin-top: 30px;}
父 元素随子元素的margin一起往下移，
解决方案：
1.给父容器加overflow-hidden;2.父容器box加border除none以外的属性 3.用父容器box的padding-top代替margin-top。