margin外边距问题

1 、上下边距会叠加

  1. !DOCTYPE html>
<html>
<head>
<m<etacharset="UTF-8">
<title></title>
<style>
.box1{
width:500px;
height:300px;
background: blue;
margin-bottom:30px;
}
.box2{
width:300px;
height:100px;
background:#ffff00;
margin-top:30px;
}
</style>
</head>
<body>
<divclass="box1"></div>
<divclass="box2"></div>
</body>
</html>

2、父级包含子级的时候，子级的margin-top会传递给父级,可以使用父级的padding替代自己的margin。
  1. <!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<style>
.box1{
width:500px;
height:300px;
background: blue;
}
.box2{
width:300px;
height:100px;
background:#ffff00;
margin-top:30px;
}
</style>
</head>
<body>
<divclass="box1">
<divclass="box2"></div>
</div>
</body>
</html>

3、margin左右
margin-lefta：uto     偏右
margin-right：auto       偏左
margin：auto      水平居中
 
    
posted @ 2015-08-01 15:41  staven  阅读(280)  评论(0)    收藏  举报