关于padding的文章

1、对元素大小的影响

对于block元素：

padding值过大时，无论如何都会影响元素尺寸；

在width不为auto时，padding值会影响元素尺寸；

在宽度为auto或者box-sizing为border-box，并且padding值不过大时，padding值不影响元素尺寸；

对于inline元素

水平padding会影响元素尺寸，垂直padding不影响，但是会影响背景色的占据空间；

可以依据这个特性制作分隔符：设置inline-padding值，再设置border。

2、padding负值

对于block元素

不支持任何形式的负值；

百分比相对于宽度计算（可以用padding：50%实现一个正方形，宽高一样，实现多种屏幕尺寸的自适应）

对于inline元素

相对于宽度计算；

默认的高度宽度细节有差异（除非设置font-size：0；否者高度比宽度大）

padding会断行。

3、标签元素的内置padding

ol/ul列表

ol/ul元素内置padding-left，但是单位是px不是em（大部分元素都是em为单位）

例如chorme浏览器下的是40px，所以如果字号很小，间距会很开，字号很大，序号会爬到容器外面

注：平日网页文字大小在12px、14px，可以设置padding-left的值为22~25px比较能对齐

4、表单元素内置padding

所有的浏览器input、textarea输入框内置padding，一般1~2px；

所有浏览器的button按钮内置padding；

部分浏览器select下拉内置padding，如firefox ie8可以设置padding；

所有浏览器的radio/checkbox单复选框无内置padding；

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

 1、chrom浏览器√

 2、firefox浏览器设置padding：0依然有padding

                                 解决方案：button：：-moz-focus-inner{ padding:0;}

 3、ie7文字越多，左右padding越大

                                 解决方案：button{overflow:visible;}

 4、padding的高度计算不兼容，button表单

                  解决方案：用label来模拟按钮，具体代码如下：

                      <button id=”btn”></button>
                      <lable for=”btn”>按钮</label>

                  

   Label

{
          Display:inline-block;
          Line-height:20px;
          Padding:10px;
   }

5、padding与图形绘制    

Padding实现三道杠的效果，具体代码如下：

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

. line-tri

{
    width:150px;height:30px;
    border:15px 0;
    border-top:30px solid;
    border-bottom:30px solid;
    background-color:currentColor;
    background-clip:content-box;//让背景颜色只填充到内容区
}

6、padding布局实例

 1、使用百分比单位构建固定比例的布局结构

A.1:1

    

div{padding：50%；}

B.配合margin等高布局

    .

box{ overflow:hidden;resize:vertical;}

.child-orange,child-green{margin-bottom:-600px;padding-bottom:600px;}
.child-orange{float:left;background:orange;}
.child-green{float:left ; background:green;}

C.两栏自适应布局

   图片宽度固定，文字信息自适应，将图片浮动或绝对定位，然后设置padding值

例1：

<div>
<img src=”mm.jpg” />
<div class=”auto”>文字</div>
 </div>

    

 img{float:left;}
 .auto{ padding-left: 120px;}

例2： 

<div class=”pbox”>
<img src=”mm.jpg”>文字
 </div>

 .pbox{padding-left:120px ;}

.pbox img{ float:left; margin-left:-120px;}