实例
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta charset="utf-8" />
<title>盒子模型</title>
</head>
<body>
<div class="box">
</div>
<style>
.box{
width:200px;
height: 200px;
background-color: lightblue;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
padding: 10px 20px;/*上下为10px,左右为20px*/
padding: 10px 20px 30px;/*上为10px,左右为20px,下为30px*/
padding: 10px;/*上下左右为10px*/
border-top: 10px solid green;
border-right: 10px solid red;
border-bottom: 10px dashed grey;
border-left:10px solid yellow;
border: 5px solid green;/*上下左右边框均为5px */
margin-top: 10px;
margin-right:20px;
margin-bottom: 10px;
margin-left: 20px;
margin: 10px 20px;/*上下外边距为10px,左右外边距均为20px */
}
</style>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
感悟：盒子模型一共包含：content内容，padding内间距透明只有宽，border边框，有属性，可见，margin外边距透明有宽！