对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