css 块元素/内联元素的 padding / margin / border / outline 排版规则

padding / margin / border / outline 是 css 日常工作中经常用到的几个属性，而在 html 标签中有两种元素类型：
块元素（占用一行）自动换行 / 内联元素（占用内容）不换行
比如 div 就是块元素、 span 就是内联元素。
那么对于这两种元素类型设置这些属性后会有什么变化呢？
其实我们只需事先记住：内联元素设置的只会影响内联元素、块元素设置的只会影响块元素，然后再结合下面的案例，相信你很快就可以明白是什么意思。

padding

• 块元素：包含元素尺寸、仅影响所有块元素排版
• 内联元素：包含元素尺寸、仅影响所有内联元素排版
  

margin

• 块元素： 不包含元素尺寸、仅影响所有块元素排版
• 内联元素：不包含元素尺寸、仅影响所有内联元素排版（仅支持左右margin，不支持上下 margin）
  

border

• 块元素：包含元素尺寸、仅影响所有块元素排版
• 内联元素：包含元素尺寸、仅影响所有内联元素排版
  

outline

• 块元素：不包含元素尺寸、不影响所有排版
• 内联元素：不包含元素尺寸、不影响所有排版