盒模型
盒模型是css布局的基石，它规定了网页元素如何显示以及元素之间的相互关系。css定义所有元素都可以拥有盒子一样的外形和平面空间，即都包含content （内容区）、padding （填充区）、border （边框区）以及margin（在边界区）等四部分组成。
盒模型的作用是用来控制元素和元素或者元素和内容之间的位置关系。
盒模型的组成部分
content：元素的宽和高
padding：控制父元素和子元素之间的位置关系
控制元素和内容之间的位置关系
border：盒子的边缘
margin：控制同辈之间的位置关系
padding和margin的区别：
1、添加padding值后，会把元素的原有大小撑大（）如果让元素发现不变的话，需要在元素的宽高上面减掉所加的padding值。margin不会影响元素的实际宽高，但也会增加他的所占区域！
2、margin 可以写负值，padding 不可以写负值。
3、margin用来控制同辈元素之间的位置关系
padding用来控制父子元素之间的位置关系
来源：CSDN
作者：不愿人间见白头
链接：https://blog.csdn.net/m0_46398200/article/details/104482454