css 之 padding

【1】padding 与 元素的尺寸

  ——对块级元素

   （1） 当width 为非 auto 时，padding 会影响元素尺寸

   （2） 当width 为 auto 或box-sizing 为 border-box 时,padding 不会影响元素尺寸

——对内联元素

  （1） 水平 padding 影响尺寸，垂直 padding 不影响尺寸，但会影响背景占据的空间

【2】padding 负值 与 百分比值

  （1） padding 不支持 负值

  （2）  使用 padding ：50% ；可以实现一个正方形区域

  （3） inline 水平元素的 padding 百分比值 ： 同样相对于宽度计算，默认的高宽度细节有差异，padding 会断行

【3】标签元素的内置 padding

  （1）ol 、li 元素内置 padding-left ,单位是 px ,不是em （平时的网页开发，设置22-25 px）

  （2）谷歌浏览器下是 40 px

  （3） 字号小的时候，间距会很开，字号很大的时候，序号会跑到容器外去

【4】 表单元素的内置 padding

  （1） 所有浏览器的 input / textarea 输入框 内置 padding

  （2）  所有浏览器 button 按钮内置 padding

  （3）  部分浏览器 select x下拉框内置 padding ,如 火狐，IE8+ 可以设置 padding

  （4） 所有浏览器 radio /checkbox 单复选无内置 padding

  （5） button 按钮元素的 padding 最难控制 ：

【5】 padding 与 图形绘制

【6】 padding 与 布局

—— 使用百分比单位构建固定比例布局结构

—— 配合margin 实现等高布局

——两栏自适应布局