css之深入理解padding

一，对于block元素

padding是会影响元素的尺寸的。

DOM文档：

<div class="box"></div>

css清单：

 .box{
            width:200px;
            height:200px;
            background-color: #ffed53;
            padding:20px;
        }

实际效果：元素大小240*240 ，因为有padding:20px.

结论：padding会对block元素的尺寸产生影响。

二，对于block水平元素，但是width:auto或box-sizing为border-box的时候

DOM文档：

<div class="box">文字的位置在哪里呢？</div>

css清单：

 .box{
            width:200px;
            height:200px;
            background-color: #ffed53;
            box-sizing:border-box;
            padding:0 10px;
        }

实际效果：box大小还是200*200,但是文字内容还是有了左padding----10px

当padding大小超过宽高时，

css样式：

  .box{
            width:200px;
            height:200px;
            background-color: #ffed53;
            box-sizing:border-box;
            padding:0 200px;
        }

实际效果：400px*200px ----宽度为padding的宽度

结论：对于block水平元素，但是width:auto或box-sizing为border-box的时候,padding不会影响元素的尺寸....但是当padding

大小超过宽高时，宽高按padding的宽高显示，里面的文字按最小宽度显示。

最终结论：

对于block元素：

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

2，width非auto，padding影响尺寸。

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

三，对于inline水平元素

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

DOM文档:

<span class="box">文字的位置在哪里呢？</span>

css样式：

 .box{
            background-color: #ffed53;
            padding:40px;
        }

垂直padding影响了背景色。

如何利用这一特性：

实现高度可控的分隔线

1，直接使用字符：注册 | 登录

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

3，使用inline padding: 注册 | 退出登录

DOM文档：

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

css清单：

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

3关于padding负值

padding不支持任何形式的负值

4，关于padding的百分比值

padding百分比均是相对于父元素的宽度计算的

运用，轻松实现一个正方形：

DOM文档：

<div class="container">
    <div class="box"></div>
</div>

css清单：

 .container{
           width:100px;
           height:200px;
       }
        .box{
            background-color: #8ec63f;
            padding:50%;
        }

50*50px的正方形：

不同手机分辨率正方形布局：

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

1，同样相对于宽度计算

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

3，padding会断行

 <style>
       .container{
           width:100px;
           height:200px;
       }
        .box{
            background-color: #8ec63f;
            padding:50%;
        }
    </style>
</head>
<body>
<div class="container">
    <span class="box">若干文字</span>
</div>

第三节标签元素的内置padding

1,ol/ul列表

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

2. 例如Chrome浏览器下是40px ；

3. 所以如果字号很小，间距就会很开；

4. 所以如果字号很大，序号会爬到容器外面；

备注：文字大小一般为12px~14px ，padding-left 为22px~25px，基本可以实号与下面的内容对齐。

二. 表单元素的内置padding

1. 所有浏览器input/textarea输入框内置padding；

2. 所有button按钮内置padding；

3. 部分浏览器select下拉内置padding，如FireFox、IE8+可以设置padding；

4. 所有浏览器radio/checkbox单复选框内无内置padding；就算设置也没用。

5. button 按钮元素的padding最难控制；

1）. Chrome浏览器 padding设为0有效；

2）. FireFox浏览器设置padding：0左右依旧有padding；可以用button::-moz-focus-inner { padding:0 }设置padding为0。

3）. IE浏览器：IE7文字越多，左右padding逐渐变大！可以设置button { overflow： visible; }使左右padding为0；

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

button{

line-height: 20px;

padding: 10px;

border : none;

}

高度：

IE7:          45px;   ?

IE8+:        40px;

FireFox:    42px; ？

Chrome: 40px;

建议：<button id="btn"></button> <label for="btn">按钮</label>

           label{

              display: inline-block;

               line-height: 20px;

   padding: 10px;

            }

高度：

IE7:           40px;

IE8+:         40px;

FireFox:    40px;

Chrome: 40px;