css深入理解padding

padding 中规中矩，性格温婉平和！

         第一节：CSS padding与容器的尺寸——了解padding与元素尺寸之间关系

          CSS padding与容器的尺寸关系复杂

            对于block水平元素 没有padding的时候 .gay{width:50cm;} padding影响元素尺寸      （理解为人身体的脂肪，人和人之间的距离）.gay{width:20cm;padding:0 12px;}

            但是width:auto或box-sizing为border-box的时候 .gay{width:80cm;box-sizing:border-box;padding:0 15px;}

            .text{width:8cm;box-sizing:border-box;padding:0 1.5cm;}这个时候padding不会影响元素尺寸，但是当padding大小超过宽高的时候，.text{width:8cm;box-sizing:border-box;padding:0 8cm; }这时候元素按内联元素最小宽度显示，此时padding同样影响了元素的尺寸。

            结论：对于block水平元素

            1.padding值暴走，一定会影响尺寸；

            2.width：auto，padding影响尺寸；

            3.width为auto或box-sizing为border-box，同时padding值没有暴走，不影响尺寸。

          对于inline水平元素

              水平padding影响尺寸，垂直padding不影响尺寸 .leader{padding:50px},但是会影响背景色（占据空间）。大到比父元素还大的时候，设置overflow：auto会出现滚动条

           如何利用这一特性

                   高度可控的分割线

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

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

                   3.使用inline padding：注册|退出登录

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

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

         第二节：css padding负值和百分比值——了解padding特殊值的特殊表现

             1.关于padding的负值，padding不支持任何形式的负值。

             2.关于百分比均是相对与宽度计算的。

               如何实现这一特性，轻松实现一个正方形 div:padding:50%(相对百分比计算)

               真实案例

               <div class="container">

                   <div class="example">

                     <h2>你的指尖</h2>

                     <h4>慕课网</h4>

                   </div>

               </div>

               .container{padding:50%;background:url(exp.jpg);background-size:100%;position:relative;}  .example{position:absolute;top:0;right:0;bottom:0;left:0;}实现一个正方形的响应式布局。

             3.inline水平元素的padding百分比值

               1.同样相对于宽度计算

               2.默认的高度宽度细节有差异

               3.padding会断行

               inline元素的padding断行

               span{padding:50%;}

               <span syle="padding:50%;">内有文字若干</span>

               如果是空的inline元素，高度还是要比宽度高

                   设置fon-size:0px；得到一个正方形。

                   为何会有额外的高度 

                   inline元素的的那个会让“幽灵空白节点”显现，也就是规范中的strut出现。content-area，可以通过font-size:0px;让他不显示。

         第三节：标签元素的内置padding-这里有一些你可能不知道的小秘密

                   1.ol/ul列表

                            1.1 ol/li元素内置padding-left，但是单位是px不是em;

                            1.2 例如chrome浏览器下是40px;

                            1.3 如果字号很小，间距就会很开；

                            1.4 如果字号很大，序号回爬到容器外面

                            margin等一般em的。

                   2.表单元素的内置padding值

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

                            所有浏览器button按钮内置padding

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

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

                            button按钮元素的按钮是最难控制的。

                              1.chrome浏览器是没有问题的。

                              2.firefox浏览器  设置padding:0左右依然有padding！ 需要设置button::-moz-focus-inner{padding:0;}padding才为0

                              3.IE浏览器 ie7文字越多，左右padding逐渐变宽。设置overflow:hidden以后就正常了。

                              4.padding与高度计算的不兼容

                                     button{

                                               line-height:20px;

                                              padding:10px;

                                               border:none;

                                     }

                                     IE7   45px;

                                     IE8   40px;

                                     FireFox 42px;

                                     Chrome:  40px;

                            button表单按钮padding

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

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

                            label{display:inline-block;inline-height:20px;padding:10px;}

                            让button可见性隐藏。

第四节:padding与图形绘制——利用padding来绘制图形

         实现3道杠——不借助伪元素，只用一个div

                   实现示意

                   <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-clip:content-box;

                   }

                   实现一个点

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

                   .eye{

                            width:150px;

                            height:150px;

                            padding:10px;

                            border:10px solid;

                            border-radius:50%;

                            background-color:currentcolor;

                            background-clip:content-box;

                   }

         第五节:padding布局实战----padding在布局这块比较好的应用

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

                     移动端1:1头图布局

                            div{padding:50%;}

                   2.配合margin实现等高布局。

                    .box{overflow:hidden;resize:vertical;}

                    .child-orange,.child-green{

                            margin-buttom:-600px;

                            padding-bottom:600px;

                    }

                    .child-orange{

                            float:left;

                            background:orange;

                    }

                    .child-green{

                            float:left;

                            background:green;

                    }

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

                     <div class="pbox">

                       <img src="mm.jpg" />

                       <div class="auto">

                            本例子实现。。。。

                       </div>

                     </div>

                     img{float:left;}

                     .auto{

                       padding-left:120px;

                     }

原文：http://www.cnblogs.com/zhongke/p/6597388.html