持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第9天，点击查看活动详情

一、盒子模型

（一）内边距padding

padding简写属性

• padding属性是有方向的，可以同时表示四个方向，且方向是有顺序的：上、右、下、左
• padding:20px:表示四个方向的内填充都为20像素
• padding:10px 20px:表示上下两个方向的内填充为10像素，左右为20像素
• padding:10px 20px 30px:上为10像素，左右为20像素，下为30像素
• padding:10px 20px 30px 40px:上为10像素，右为20像素，下为30像素,左为40像素，

（二）外边距margin

• margin的简写属性与padding类似
• margin的坍塌现象：
  • 在标准文档流中，竖直方向的margin不会叠加，会取较大值
  • 水平没有margin坍塌现象
  • 浮动元素没有margin坍塌现象

（三）margin实现水平居中

• margin的属性值可以是auto，表示“自动”，当当前盒子的左外边距与右外边距的值都为auto是，那么当前盒子会水平居中

margin居中注意事项

• 使用margin实现水平居中时，该盒子必须有一个固定的宽度
• 只有块级元素可以实现水平居中，行内元素不可以
• 只有标准文档流中的盒子才可以使用margin实现水平居中
• margin属性时用于实现盒子的水平居中，而不是文本的水平居中。text-align属性用于实现文本的对齐方式，属性值为center表示水平居中，但它不能实现盒子的水平居中

善于使用父元素的padding而不使用子元素的margin

• margin属性本意时用于描述兄弟元素之间的关系，不是用于描述父子元素的关系。如果是父子元素的关系，最好使用给父元素设置padding属性