对html 进行封装：包括外边距、边框、内边距和实际内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.songs{
width: 100px;
height: 100px;
background-color: violet;
padding: 50px 60px;
border: 5px solid green;
margin: 60px 10px;
}
.kay{
width: 50px;
height: 30px;
background-color: turquoise;
border: 10px skyblue;
padding-left: 20px;
padding-top: 60px;
margin-bottom: 60px;
padding-right: 30px;
}
</style> <!--padding第一个值上下 第二个值左右--><!--boder 粗细 线的样式 颜色--><!--margin让元素之间存有间隙 第一个值上下 第二个值左右-->
</head>
<body>
<div class="songs">
DDD
</div>
<div class="kay">pp</div>
<p>6</p>
</body>
</html>
外边距：margin 让元素之间留有空隙 margin：上下 左右
边框：border ：粗细 线样式
内边距：padding:上下 左右
margin 和padding属性都可以分开来写，如：padding-left:20px
标签：盒子,color,border,模型,60px,padding,内边,margin,CSS From： https://www.cnblogs.com/songs7/p/17752967.html