margin:div之间的间隔,不影响div的尺寸大小
border :div边距,一般用于显示div的位置
padding:一般用于调整div里的内容位置
属性:left/right/top/bottom
代码块:
<!DOCTYPE html>
<html>
<head>
<style>
/* 样式分为id和class样式 ,对应div定义#和. */
#div1{
color: blue;
background: yellow;
border: black 50px;
/* dashed:虚线 solid:实线 */
border-style: solid;
box-sizing: border-box;/* 固定大小 */
/*
margin: 可用设置两个或者多个div之间的间隔大小
border: div的边界设置,不影响div尺寸的大小
padding: div的填充物,div里的内容会随着padding的边距大小设置而变化
*/
padding-bottom: 100px;
padding-left: 100px;
}
div{
/* 向左靠 */
float: left;
color: red;
width: 300px;
height: 400px;
background: gray;
margin: 20px 20px;
}
.div2{
padding-left: 100px;
box-sizing: border-box;
}
</style>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="div1">
aaa
</div>
<div class="div2">
bbb
</div>
<div>
ccc
</div>
</body>
</html>
效果图: