内边距与外边距

内边距（padding） 【读法：（攀鼎）】

padding属性用于设置内边距。 是指 边框与内容之间的距离。
padding有4个值分别上右下左、padding-left、right、top、bottom
注意：
添加内边距会让盒子变大
内容和边距有了距离，添加了内边距
内边距合起来写的值分别：
padding: 上内边距 右内边距 下内边距 左内边距 ；
padding: 上内边距 左右内边距 下内边距 ；
padding: 上下内边距 左右内边距 ；
padding: 上下左右内边距；

内盒尺寸计算（元素实际大小）

• 宽度
  Element Height = content height + padding + border （Height为内容高度）
  - 高度
  Element Width = content width + padding + border （Width为内容宽度）

• 盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框

  padding不影响盒子大小情况

  如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑开盒子。

  外边距（margin）

  margin就是控制盒子和盒子之间的距离
  属性值和内边距一样（padding）

  块级盒子水平居中

  盒子必须指定宽度（width），再给左右的外边距(margin) 设置为自动（auto）；【读法（凹凸）】
  例如：.box { width:100px; margin: 0 auto**; }**

  文字居中和盒子居中的区别

  盒子内的文字水平居中是 text-align: center, 而且还可以让 行内元素和行内块居中对齐
  块级盒子水平居中 左右margin 改为 auto

  插入图片和背景图片区别

1. 插入图片 我们用的最多 比如产品展示类 移动位置只能靠盒模型 padding margin
2. 背景图片我们一般用于小图标背景 或者 超大背景图片 背景图片 只能通过 background-position

   除元素的默认内外边距

   ```html 为了更灵活方便地控制网页中的元素，制作网页时，我们需要将元素的默认内外边距清除

• { padding:0; / 清除内边距 / margin:0; / 清除外边距 / } 注意：

• 行内元素为了照顾兼容性， 尽量只设置左右内外边距， 不要设置上下内外边距。 ```

  外边距合并

  1、同时2个盒子都设置了边框 会以值比较高的为准，边框值低的 没有效果
  尽量给只给一个盒子添加margin值 另外一个盒子不用重复设置
  **
  2、如果小盒子在父盒子里面设置高度
  会直接加到父盒子的外边距 而小盒子里没起效果

1. 可以给父盒子添加边框。
2. 可以给父盒子添加内边距
3. 可以给父盒子添加**overflow:hidden**

或者使用还有其他方法，比如浮动、固定、绝对定位的盒子