盒子模型——内外边距

内边距（padding）

1. 与边框相同可以分别通过padding-top/right/bottom/left设置对应的样式
2. 也可知直接设置多个值

• 两个值时 第一个值表示上下 第二个值表示左右
• 三个值时 第一个值表示上 第二个值表示左右 第三个值表示下
• 四个值时 按照顺时针的方法表示上下左右

外边距（margin）

1. 与边框相同可以分别通过margin-top/right/bottom/left设置对应的样式
2. 也可知直接设置多个值

• 两个值时 第一个值表示上下 第二个值表示左右
• 三个值时 第一个值表示上 第二个值表示左右 第三个值表示下
• margin不会影响盒子可见框的大小，但会影响盒子的位置
• 默认情况下margin-right不会产生任何效果 盒子模型的尺寸：
• 公式：margin+border+padding+内容（content） 盒子的可视大小：
• border+padding+内容（content） box-sizing：；
• content-box 网页默认值
• border-box 盒子的宽度/高度等于元素内容的宽度/高度【border+padding+内容=设置的宽度/高度（盒子的可见大小）】
• iherit 继承父元素的盒子模型模式