padding的使用（尺寸、按钮、字体距离、画图）

padding会增加元素尺寸，padding:0  15px;

padding不会影响元素尺寸：box-sizing:border-box   padding:0 15px;（此时，外边框的宽不会变化，内容缩小）

如果左右的padding值比width还要大，那么还是会影响元素尺寸的。

对于inline水平元素：水平padding影响尺寸，垂直padding不影响。

如果加上背景色，

高度可控的分割线：

直接使用字符：注册|退出登录

inline-block控制：注册 |   退出登录

使用inline  padding

注册<span></span>退出登录

span{  padding:16px  6px 1px;margin-left:!2px;  border-left: 2px solid; font-size:0}

padding的负值和百分比值：

padding的百分比是相对于宽度计算的。

实现应正方形：div{padding:50%}

比如实现app页面，用H5，那么怎么才能适应所有屏幕呢，实现一个正方形：

padding:50% ;  兼容性会更好。

padding还会出现断行：比如div里面有文字，padding：50% ，不够宽的话，文字会掉下来，设置个背景色就更明显看出来了。

标签元素的内置padding：

元素很多内置的一些padding值，尤其是margin值，基本上都是以em为单位，

平时的网页字体大小：12px    14px  

但是用padding-left的话： 22px --25px

所有浏览器的input、textarea输入框内置padding值(设置了padding也没用)

所有浏览器的按钮有内置padding【chrome可以；火狐下设置padding:0;左右依然有padding。此时：button::-moz-focus-inner{padding:0;}此时真的padding为0l了；IE浏览器：IE7文字越多，左右的padding越大button:{overflow:visible};padding与高度的计算是不兼容的，所以button的兼容性不好，以后要用a标签去模拟按钮，

button表单按钮padding：

<button   id="btn"></button>

<label  for="btn">按钮</label>

label{

      display:inline-block;

      inline-height:20px;

       padding:10px;

}

这种方法，IE7\8  chrome   firefox都兼容。

对于button，可以决定定位到之外，或者z-index藏在背景之下。

】

部分浏览器select下内置padding，比如火狐、IE8+可以设置padding

【padding可以用来绘图】

可以使用padding来实现三道杠{三}（一般浏览器都会有）

可以让背景只在内容区域显示：

<div class="line-tri"></div>

.line-tri{

width:150px;height:30px;

padding:15px  0;

border-top:30px solid;

border-bottom:30px solid;

background-color:currentcolor;

background-slip:content-box;

}

案例二：用HTML实现一个圆：

<div class="eye"></div>

.eye{

     width:150px;height:30px;

    padding:10px;

   border:10px  solid;

   border-radius:50%;

background-color:currentcolor;

background-slip:content-box;

}

【padding构建固定比例】

padding实现两栏自适应布局：