您的位置：首页 > Web前端 > HTML

div显示的width和height与padding、margin、border的关系

2013-11-07 11:09 381 查看

一直都不太明白，一个div的width和height与padding、margin、border的关系。今天有时间，做了测试。终于明白了。总结一下。（可以直接复制，保存一个html文件既可以用浏览器看到效果）

<html>
<head>

<title>test padding margin border</title>

<style type="text/css">
body {
font-family: verdana;
font-size: 14px;
text-align: left;
}
#big1{
width: 1000px;
margin: 0 auto;
background-color:#abcabc;
}
#aa1{
width: 200px;
height:200px;
margin: 0 auto;
float:left;
background-color:red;
}
#ab1{
width: 200px;
height:200px;
padding-top:50px;
padding-left:50px;
margin: 0 auto;
float:left;
background-color:blue;
}
#ac1 {
width: 150px;
height:150px;
padding-top:50px;
padding-left:50px;
margin: 0 auto;
float:left;
background-color:gray;
}
#ad1 {
width: 200px;
height:200px;
padding-top:50px;
padding-bottom:50px;
margin: 0 auto;
float:left;
background-color:green;
}

#big2{
width: 1000px;
margin: 0 auto;
background-color:#abcabc;
}
#aa2{
width: 200px;
height:200px;
margin: 0px;
float:left;
background-color:red;
}
#ab2{
width: 200px;
height:200px;
margin-top:50px;
margin-left:50px;
float:left;
background-color:blue;
}
#ac2 {
width: 150px;
height:150px;
margin-top:50px;
margin-left:50px;
float:left;
background-color:gray;
}
#ad2 {
width: 200px;
height:200px;
margin-top:50px;
margin-bottom:50px;
float:left;
background-color:green;
}

#big3{
width: 1000px;
margin: 0 auto;
background-color:#abcabc;
}
#aa3{
width: 200px;
height:200px;
margin: 0px;
padding:0px;
float:left;
border:black 0px solid;
background-color:red;
}
#ab3{
width: 200px;
height:200px;
margin: 0px;
padding:0px;
float:left;
border:black 10px solid ;
background-color:blue;
}
#ac3 {
width: 180px;
height:180px;
margin: 0px;
padding:0px;
float:left;
border:black 10px solid ;
background-color:gray;
}

.clear{
clear:both;
}

</style>

</head>

<body>

<div id="big1">
<div id="aa1">
width: 200px;<br/>
height:200px;<br/>
margin: 0 auto;<br/>
float:left;<br/>
background-color:red;   <br/>
</div>
<div id="ab1">
width: 200px;<br/>
height:200px;<br/>
padding-top:50px;<br/>
padding-left:50px;<br/>
margin: 0 auto;	<br/>
background-color:blue;<br/>

</div>
<div id="ac1">
width: 150px;<br/>
height:150px;<br/>
padding-top:50px;<br/>
padding-left:50px;<br/>
margin: 0 auto;	<br/>
background-color:gray;<br/>

</div>
<div id="ad1">
width: 200px;<br/>
height:200px;<br/>
padding-top:50px;<br/>
padding-bottom:50px;<br/>
margin: 0 auto;	<br/>
background-color:green;<br/>

</div>
<div class="clear"></div>
总结：div与padding的关系：真正的宽度是width+(padding-left)+(padding-right)，真正的高度：height+(padding-top)+(padding-bottom)
</div>

<br/>

<div id="big2">
<div id="aa2">
width: 200px;<br/>
height:200px;<br/>
margin: 0px;<br/>
float:left;<br/>
background-color:red;   <br/>
</div>
<div id="ab2">
width: 200px;<br/>
height:200px;<br/>
margin-top:50px;<br/>
margin-left:50px;<br/>
float:left;<br/>
background-color:blue;<br/>

</div>
<div id="ac2">
width: 150px;<br/>
height:150px;<br/>
margin-top:50px;<br/>
margin-left:50px;<br/>
float:left;<br/>
background-color:gray;<br/>

</div>
<div id="ad2">
width: 200px;<br/>
height:200px;<br/>
margin-top:50px;<br/>
margin-bottom:50px;<br/>
float:left;<br/>
background-color:green;<br/>

</div>
<div class="clear"></div>
总结：div与margin的关系：真正的宽度就是width，真正的高度就是height
</div>

<br/>

<div id="big3">
<div id="aa3">
width: 200px; <br/>
height:200px; <br/>
margin: 0px; <br/>
padding:0px;<br/>
float:left; <br/>
border:#454545 0px solod;<br/>
background-color:red;  <br/>
background-color:red;   <br/>
</div>
<div id="ab3">
width: 200px; <br/>
height:200px; <br/>
margin: 0px; <br/>
padding:0px;<br/>
float:left; <br/>
border:#454545 10px solod ;<br/>
background-color:blue; <br/>

</div>
<div id="ac3">
width: 180px; <br/>
height:180px; <br/>
margin: 0px; <br/>
padding:0px;<br/>
float:left; <br/>
border:#454545 10px solod ;<br/>
background-color:gray;<br/>

</div>

<div class="clear"></div>
总结：div与border的关系：真正的宽度：width+2*border，真正的高度：height+2*border

</body>
</html>

下面是效果图：

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

标签： html padding margin border

相关文章推荐

新的分享

章节导航