4.2 温和的 padding 属性
4.2.1 padding 与元素的尺寸
因为默认的box-sizing是content-box，所以使用padding会增加元素的尺寸。
尺寸表现对具有块状特性的元素和内联元素而言有些许不同。
CSS中还有很多其他场景或属性会出现这种不影响其他元素布局而是出现层叠效果的现象。比如：relative元素的定位、盒阴影box-shadow以及outline等。这些层叠现象虽然看似类似，但实际上是有区别的。分为两类：一类是纯视觉层叠，不影响外部尺寸；另一类则会影响外部尺寸。盒阴影box-shadow以及outline属于前者，而这里的inline元素的padding层叠属于后者。因为父元素设置overflow: auto，会出现滚动条。
4.2.2 padding 的百分比值
padding 百分比值无论是水平方向还是垂直方向均是相对于宽度计算的。
4.2.3 标签元素内置的 padding
（1）ol/ul 列表内置 padding-left，但是单位是 px 不是 em。
（2）表单元素都内置 padding，例如：input、textarea、button等
<button>按钮元素就算我们重置padding为0，在Firefox浏览器下，左右依然有padding，可以试试使用：button::-moz-focus-inner { padding: 0; }
4.2.4 padding 与图形绘制
不使用伪元素，仅一层标签实现“三道杠”分类图标或者双层圆点效果，这里主要是background-clip属性的用法。
4.3 激进的 margin 属性
4.3.1 margin 与元素尺寸以及相关布局
元素尺寸的相关概念：
元素尺寸（也被称为元素偏移尺寸：width、height、padding、border、offsetWidth、offsetHeight），元素的 border box 的尺寸；
元素内部尺寸（也被称为元素可视尺寸innerWidth、innerHeight、padding、clientWidth、clientHeight），也就是元素的 paddingbox 的尺寸；
元素外部尺寸，也就是元素的 margin box 的尺寸；
CSS世界默认的流方向是水平方向，因此，对于普通元素，margin只能改变元素水平方向尺寸。但是，对于具有拉伸特性的绝对定位元素，则水平或垂直方向都可以
由于margin具有这种流体特性下的改变尺寸特性，因此，margin可以很方便地实现很多流体布局效果。
内联元素垂直方向的margin是没有任何影响的，既不会影响外部尺寸，也不会影响内部尺寸。对于水平方向，由于内联元素宽度表现为“包裹性”，也不会影响内部尺寸。
4.3.2 margin 的百分比值
和padding属性一样，margin的百分比值无论是水平方向还是垂直方向都是相对于宽度计算的。