HTML盒模型

盒模型

​ 什么是盒模型：每一个标签都是一个矩形，像一个盒子，所以HTML页面的布局可以理解为多个盒子组合嵌套排序而成。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wSHciGHI-1649508211222)(C:\Users\Guolan\AppData\Local\Temp\1649504298774.png)]

​ 整个盒模型的组成由上图所示，盒子的内容大小由width宽度和height高度指定，padding设置盒内边距，border设置盒子边框，margin设置盒子外边距。

​ 其中padding和border会增加盒子大小，而margin不会。

1.padding内边距

​ padding可以给1-4个值，顺时针赋值，从上开始：

<style>
    div{
     
        padding: 30px 50px 70px 90px