认识盒模型和padding详解

所有HTML标签都可以看成矩形盒子，由width、height、padding、border构成，称为“盒模型”

---

形象的理解：

---

注意事项：

• 盒子的总宽度=width+左右padding+左右border
• 盒子的总高度=height+上下padding+上下border
• 内边距：padding
• 外边距：margin

---

padding详解：

• padding是内边距
• padding是四个方向的们，可以分别用小属性进行设置

小属性	意义
padding-top	上padding
padding-right	右padding
padding-bottom	下padding
padding-left	左padding

padding的四数值写法

• padding四数值写法：属性用四个数值以空格隔开进行设置，分别表示上右下左的padding
• 例如：padding：10px 20px 30px 40px

padding的三数值写法

例如：padding：10px 20px 40px
上 （左右） 下

padding的二数值写法

例如：padding：10px 20px
（上下） （左右）