内联元素的 padding 会对样式与布局产生影响
可以在不影响当前布局的情况下，增加链接或按钮的点击区域大小。
实现垂直分隔符
对于非替换元素的内联元素，不仅 padding 不会加入行盒高度的计算，margin 和 border 也都是如此，都是不计算高度，但实际上在内联盒周围发生了渲染。
padding 的百分比值应用于块级元素：
和 margin 属性不同，padding 属性是不支持负值的；
padding 支持百分比值，但是，和 height 等属性的百分比计算规则有些差异，差异在于：padding 百分比值无论是水平方向还是垂直方向均是相对于宽度计算的应用在内联元素
• 同样相对于宽度计算；
• 默认的高度和宽度细节有差异；
• padding 会断行。
padding 区域是跟着内联盒模型中的行框盒子走所以文字换行，padding 也会跟着掉下来
内联元素的垂直 padding 还会出现幽灵空白节点用 font-size=0 消除
标签元素内置 paddingol/ul 列表内置 padding-left，单位是 px
很多表单元素都内置 padding，例如：
• 所有浏览器<input>/<textarea>输入框内置 padding；
• 所有浏览器<button>按钮内置 padding；
• 部分浏览器<select>下拉内置 padding，如 Firefox、IE8 及以上版本浏览器可以设置 padding；
• 所有浏览器<radio>/<chexkbox>单复选框无内置 padding；
• <button>按钮元素的 padding 最难控制！不同浏览器 button 的 padding 不同
用 label 统一处理
padding 与图形绘制
padding 属性和 background-clip 属性配合
margin 与元素尺寸及相关布局
元素尺寸：包括 padding和 border，也就是元素的 border-box 的尺寸，元素偏移尺寸
• 元素内部尺寸：表示元素的内部区域尺寸，包括 padding 但不包括 border，也就是元素的 paddingbox 的尺寸，元素可视尺寸
• 元素外部尺寸：表示元素的外部尺寸，不仅包括 padding 和 border，还包括 margin，也就是元素的 margin box 的尺寸
对于 padding，元素设定了 width 或者保持“包裹性”的时候，会改变元素可视尺寸；但是对于 margin 则相反，元素设定了 width 值或者保持“包裹性”的时候，margin 对尺寸没有影响，只有元素是“充分利用可用空间”状态的时候，margin 才可以改变元素的可视尺寸。
可实现一侧定宽的两栏适应性布局利用 margin 改变元素外部尺寸来实现两端对齐
最后一个元素的 margin 冗余可以用
nth-of-type 选择器
单独添加类名
父元素设置负值 margin
进行消除
如果容器可以滚动，在 IE 和 Firefox 浏览器下是会忽略 padding-bottom 值的，Chrome 等浏览器则不会使用 margin-bottom 实现底部留白
margin 负值可实现等高如果需要有子元素定位到容器之外，父级的 overflow:hidden 是一个棘手的限制；其次，当触发锚点定位或者使用DOM.scrollIntoview()方法的时候，可能就会出现奇怪的定位问题，
可以在不影响当前布局的情况下，增加链接或按钮的点击区域大小。
实现垂直分隔符
对于非替换元素的内联元素，不仅 padding 不会加入行盒高度的计算，margin 和 border 也都是如此，都是不计算高度，但实际上在内联盒周围发生了渲染。
padding 的百分比值应用于块级元素：
和 margin 属性不同，padding 属性是不支持负值的；
padding 支持百分比值，但是，和 height 等属性的百分比计算规则有些差异，差异在于：padding 百分比值无论是水平方向还是垂直方向均是相对于宽度计算的应用在内联元素
• 同样相对于宽度计算；
• 默认的高度和宽度细节有差异；
• padding 会断行。
padding 区域是跟着内联盒模型中的行框盒子走所以文字换行，padding 也会跟着掉下来
内联元素的垂直 padding 还会出现幽灵空白节点用 font-size=0 消除
标签元素内置 paddingol/ul 列表内置 padding-left，单位是 px
很多表单元素都内置 padding，例如：
• 所有浏览器<input>/<textarea>输入框内置 padding；
• 所有浏览器<button>按钮内置 padding；
• 部分浏览器<select>下拉内置 padding，如 Firefox、IE8 及以上版本浏览器可以设置 padding；
• 所有浏览器<radio>/<chexkbox>单复选框无内置 padding；
• <button>按钮元素的 padding 最难控制！不同浏览器 button 的 padding 不同
用 label 统一处理
padding 与图形绘制
padding 属性和 background-clip 属性配合
margin 与元素尺寸及相关布局
元素尺寸：包括 padding和 border，也就是元素的 border-box 的尺寸，元素偏移尺寸
• 元素内部尺寸：表示元素的内部区域尺寸，包括 padding 但不包括 border，也就是元素的 paddingbox 的尺寸，元素可视尺寸
• 元素外部尺寸：表示元素的外部尺寸，不仅包括 padding 和 border，还包括 margin，也就是元素的 margin box 的尺寸
对于 padding，元素设定了 width 或者保持“包裹性”的时候，会改变元素可视尺寸；但是对于 margin 则相反，元素设定了 width 值或者保持“包裹性”的时候，margin 对尺寸没有影响，只有元素是“充分利用可用空间”状态的时候，margin 才可以改变元素的可视尺寸。
可实现一侧定宽的两栏适应性布局利用 margin 改变元素外部尺寸来实现两端对齐
最后一个元素的 margin 冗余可以用
nth-of-type 选择器
单独添加类名
父元素设置负值 margin
进行消除
如果容器可以滚动，在 IE 和 Firefox 浏览器下是会忽略 padding-bottom 值的，Chrome 等浏览器则不会使用 margin-bottom 实现底部留白
margin 负值可实现等高如果需要有子元素定位到容器之外，父级的 overflow:hidden 是一个棘手的限制；其次，当触发锚点定位或者使用DOM.scrollIntoview()方法的时候，可能就会出现奇怪的定位问题，
