margin和padding的高级用法

margin和padding的高级用法

margin是设置元素外边距的属性，W3C官方解释为：围绕在元素边框的空白区域是外边距。

设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用margin属性，

这个属性接受任何长度单位、百分数值甚至负值。Padding是设置元素内边距的属性，

W3C的官方解释为：元素的内边距在边框和内容区之间。

控制该区域最简单的属性是 padding 属性。CSS padding 属性定义元素边框与元素内容之间的空白区域。
Margin和padding均有四个值可以设置，这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的。

当只有一个值时，代表四个方向边距相同，均为设定的值，若有两个值，则前一个表示上下边距，

后一个表示左右边距；若有三个值，则第一个值表示上边距，第二个值表示右边距，第三个值表示下边距，

左边距会与右边距的值相同。

• 背景可以铺到padding区域，而不能铺到margin区域
  控制背景裁剪的background-clip不支持margin-box，换言之，无论如何，背景都无法铺到margin区域中
• 对于块级元素，若其width不为auto/default，可以设置margin: auto，可用于水平或垂直（需额外设置）方向上的自动居中，padding则无此功能
• margin有折叠行为，padding则无
  在子元素之上写margin表达子元素和父元素之间的留白时，需要在父元素上加入BFC，否则margin会与父元素折叠。padding则无此后顾之忧
• margin可以设置为负值，padding则无法设置为负值
  margin负值可以让元素交叠，或撑宽元素的内容区域，这在有一定间隙的列表布局中极其有用