css之padding

1.padding影响元素尺寸：
对于block元素：
- box-sizing:border-box;padding值大于宽度值，会影响元素宽度
- width非auto，padding值会影响元素宽度
- box-sizing:border-box;同时padding值没有大于宽度值或者width:auto,padding值不会影响元素宽度
对于inline元素：
水平padding影响尺寸，垂直padding不影响尺寸，但影响背景色（占据空间）,也会影响边框
2.应用–分隔线
法1：用字符|，局限：会跟着字体的大小改变高度，跟字体一样高，不符合审美
法2：inline-block，要设置高度宽度和对齐
法3：用inline和padding，通过控制padding来对齐

注册<span></span>登录
span{
   border-left: 2px solid;//控制线的宽
   padding:2px 6px 1px;//左右内边距控制距离右边元素12px，上下内边距控制线的高度
   margin-left:12px //距离左边元素12px
}

3.padding负值和百分比值
padding不支持负值。
块级元素：padding的百分比是相对父元素的宽度计算。

#wrap{
   width: 100px;
    height: 200px;
}
#inner{
    padding:50%;//边长100px正方形
    background-color: red;
}
<div id="wrap">
    <div id="inner">

    </div>
</div>

应用–移动端制作正方形方块

<div class="container"></div>
.container{
    padding:50%;//宽与屏幕的宽相同
}

内联元素：padding会断行。

 #wrap{
    width: 100px;
}
span{
    padding:50%;
    background-color: red;
}
<div id="wrap">
   <span>sdddddddddddds啦啦啦啦啦啦绿dddddddd</span>        
</div>

空的inline元素，padding相同，但是高宽不相等，要设置font-size为0，高宽才相等。因为inline元素的垂直padding会让空白节点显现。

<div id="wrap">
    <span></span>        
</div>
#wrap{
    padding: 100px;
    width: 100px;
}
span{
    padding:50%;
    background-color: red;
    font-size: 0;
}

如果去掉font-size:0，不是正方形，span元素中有空白节点，默认浏览器字体16px

4.css标签元素的内置padding
ol/ul列表
内置padding-left单位是px，而不是em；
chrome浏览器是40px；
所以字号很小时，间距会很开；
所以字号很大时，序号可能跑到容器外面。
所以一般网页字体为14px，设置padding-left为22比较好。（推荐）

所有浏览器input/textarea有内置padding
所有浏览器button有内置padding
部分浏览器select有内置padding，火狐、IE8+可以设置padding
所有浏览器radio、checkbox无内置padding，不能设置padding
button的padding很难控制：
chrome浏览器下设置button的padding：0，正常
Firefox浏览器下设置button的padding：0，左右仍然还有间距，要使用button::-moz-focus-inner{padding:0;}
IE浏览器的IE7下，文字越多，左右间距越大，设置button{overflow：hidden;}就能使间距为0
button的padding与高度计算不兼容：

button{
    line-height:20px;
    padding:10px;
    border:none;
}
chrome 40px
IE7  45px
IE8+  40px
FF  42px

button的padding兼容性差，所以一般用a标签模拟按钮。
如果是要用表单提交按钮，可以用label标签来模拟按钮，这样能保留按钮的默认提交行为。

#submit-btn{
   position: absolute;
   left: -2000px;
}
label{
    display:inline-block;
    line-height: 20px;
    padding: 10px;
}
<label for="submit-btn">提交</label>
<input type="submit" id="submit-btn" value="提交">

使input元素可访问性隐藏，即不能使它overflow：hidden或者display：none，而是设置它处于屏幕外或者隐藏在背景后面，这样，在所有浏览器下按钮的高度都为40px。

<form action="www.baidu.com">
    <label for="submit-btn">提交</label>
    <input type="submit" id="submit-btn" value="提交">
</form>
form{
    background-color: red;
}
#submit-btn{
    position: relative;
    z-index: -1;//z-index为负值，可以使该元素隐藏到背景色后面
}
label{
    display:inline-block;
    line-height: 20px;
    padding: 10px;
}

5.padding与图形绘制
一个div制作一个菜单图标

 .list{
    width: 70px;
    height: 10px;
    border-bottom: 10px solid;//模拟第一道杠
    border-top: 10px solid;//模拟第三道杠
    background-color: currentColor;//当前的标签所继承的文字颜色
    background-clip:content-box;//模拟第二道杠
    padding: 10px 0;
}

.list{
    width: 70px;
    height: 70px;
    background-color: currentColor;
    background-clip:content-box;
    padding: 10px;
    border-radius:50%;
    border:10px solid;
}

6.padding实现两栏自适应布局

.left{
    width: 120px;
    height: 100px;
    background-color: red;
    float: left;
    margin-left: -120px;
}
.box{
    padding-left: 120px;
}
<div class="box">
    <div class="left"></div>
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
</div>

//或者
.left{
    width: 120px;
    height: 70px;
    background-color: red;
    float: left;
}
.right{
    padding-left: 120px;
}
<div class="box">
    <div class="left"></div>
    <div class="right">
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
    </div>
</div>