您的位置：首页 > 其它

margin外边距问题

2015-08-01 15:41 423 查看

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。

<!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 水平居中

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航