Margin-Border-Padding
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1" />
</head>
<style type="text/css">
.margin-border-padding{
word-break:break-all;
height:150px;
background-color: yellow;
margin: 0px 20px 30px 40px;
border: 3px solid red;
border-top-style:dashed;
padding: 30px 20px 6px 10px;/*上右下左*/
}
</style>
<body>
<!--
margin:表示当前div与外界
border:表示当前div的边框
padding:表示当前div与内部
-->
<div style="height:200px;width:200px;background-color:gray">
<div class="margin-border-padding">
<div>alskjaksjg;akjsg;lakalskjg;agasgasgj;askjg;aksjg;akjsg;lak</div>
</div>
<div>
</body>
</html>
如果要让div水平居中可以设置：
margin:auto
或者margin:0px auto
或者margin:0px auto 0px;
如果一个div的长宽是300px,padding=10px，border=20px，margin=30px。则整个长宽是300+10+20+30=360px。