您的位置：首页 > 其它

盒子模型 margin和padding和盒子大小的影响

2017-02-20 17:17 399 查看

margin 是盒子的外边距

padding是盒子的内边距

border是盒子的外边框

它们对盒子的宽度是有影响的，下边举一个例子：

首先是html：

<html>
<head></head>
<style type="text/css">
.div{
width:400px;
height:400px;
background-color:red;
}
.div1{
float:left;
width:200px;
height:200px;
background-color:green;
}
.div2{
float:left;
width:200px;
height:200px;
background-color:blue;
}
</style>
<body>
<div class="div">
<div class="div1"></div>
<div class="div2"></div>

<div>
</body>

两个盒子的宽度正好充满父容器：

此时如果把div1 div2分别加上margin：10px 盒子宽度就会加上外边距，宽度超过父容器：

同理，加上padding和border的话也同样增加了盒子宽度，所以要使两个盒子宽度不溢出，div的宽度需要减去所增加的属性宽度：

<html>
<head></head>
<style type="text/css">
.div{
width:400px;
height:400px;
background-color:red;
}
.div1{
margin:10px;
float:left;
width:180px;
height:180px;
background-color:green;
}
.div2{
margin:10px;
float:left;
width:180px;
height:180px;
background-color:blue;
}
</style>
<body>
<div class="div">
<div class="div1"></div>
<div class="div2"></div>

<div>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航