padding 内边距

CSS 中 默认的box-sizing 是content-box ,使用padding 会增加元素的尺寸
有的认为 全局设置box-sizing : border-box  元素尺寸就不会发生变化，实际中大多数情况下是这样的，但是 如果当padding值 足够大，那width也就无能为力了

  <style>
        *{
            box-sizing:border-box;
        } 
        #box{
            width: 80px;
            /*
             当padding足够大时候，width无效，最终宽度为120px 
             里面的内容则 表现为 "首选最小宽度"
              */
            padding: 20px 60px;
            background-color: red;
        }
    </style>

    <div id="box"></div>

 

 
内联元素的padding 不仅会影响水平方向 ，也会影响垂直方向
垂直方向的行为完全受line-height 和 vertical-align 的影响，只是视觉上没有改变 和 上一行下一行内容的间距 ，给人感觉就是垂直padding是没有起作用的
如果给内联元素加背景 或 边框，就能看到尺寸空间确实受padding影响

尺寸虽有效，但对上下元素原本布局却没有任何影响，仅仅是垂直方向发生了层叠
css中还有其他场景 或 属性会出现这种不影响其他元素布局而是出现层叠的效果的现象
层叠现象看似相似，但实际也是有区分的
分两类
1，纯视觉层叠，不影响外部尺寸  如box-shadow  outline
2，会影响外部尺寸 ，如inline元素

区分方法：
如果父容器overflow:auto  层叠区域超出父容器的时候，没有滚动条出现，则是纯视觉的
如果出现滚动条，则会影响尺寸，影响布局

所以内联元素padding 对视觉层 和布局层具有双重影响

内联padding在实际中的应用
1，增加链接按钮的点击区域大小  ，对现有的布局无影响，可以使用padding 来实现  ，如果用inline-block 则行间距等会有很大麻烦事出来

  <style>
        article a{
            display:inline-block;
            text-decoration: none;
            background-color: red;
            color:#fff;
            padding:2px 8px;
        }
     
    </style>

    <article>
        <a href="#">链接</a>
    </article> 

 
2，利用内联元素的padding 实现高度可控的分隔线    ，传统偷懒的方法可能是直接使用 "管道符"   如 登入 | 注册   .   管道符 因为是字符 所有高度是不可控的
     如果视觉要求高，就需CSS图形模拟，（方法之一 借助内联元素和padding属性来实现）

   <style>
        a+a::before{
            content: "";
            font-size: 0;
            margin-left: 6px;
            padding: 10px 3px 1px;
            border-left: solid gray 1px;
        }
         a{
             text-decoration: none;
            color:red;
        } 
     
    </style>
  
  <a href="#">登入</a><a href="#">注册</a>

 

 

3.网页看通过地址栏的hash值 和页面HTML中的id值一样的元素 发生锚点定位，
  有时希望标题距离页面的顶部有一段距离，如正好有一个50px高的position:fixed的导航栏
  如果给标题栏设置一个padding-top :50px；这会影响布局（块级元素设置padding-top :50px会影响布局 ，但内联不会）
用内联，即不会影响原来的布局和定位，同时又把http：www.jjj.cn / xxx/ #hash  定位位置下移动了50px

如果下面的<h3>标签设置overflow : hidden,  则Chrome 和 Firefox浏览器定位不受影响，但IE浏览器会定位在<h3>标签位置
实际上，非替换元素的内联元素，padding margin  和 border都是不计算高度的，但实际上在内联盒子周围发生渲染

<style>
        h3{
            line-height: 30px;
            font-size: 14px;
        }

    h3 >span{
        padding-top: 58px;
    }
    </style>

    <h3><span id="hash">标题</span></h3>

 

 

padding的百分比值
padding属性不支持负值，
padding属性支持百分比值，但和height等属性的百分比计算规则是有差异的.
差异：padding的百分比值无论是水平方向还是垂直方向都是相对于宽度计算的

例子：5:1固定头图效果，可使用padding进行比例控制，则小屏幕下头图高度天然等比例缩小，没有任何的JavaScript  

<style>
      .box{
          padding: 10% 50%;
          position: relative;
      }
      .box>img{
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
      }
    </style>

    <div class="box">
        <img src="./img/picture..1.jpg"/>
    </div>

 

 

内联元素百分比的表现
1，同样相对于宽度计算
2，默认的高度 和 宽度细节有差异
3，padding会断行

 <style>
        .box{
            border: dashed red 1px;
            width: 200px;
            height: 300px;
            margin-top: 200px;
            margin-left: 100px;
        }
       .box span{
           /* 
           内联元素的 padding 会断行，也就是padding区域是跟着内联盒模型中的行框盒子走了
           原本的padding区域也跟着一起掉
            */
            padding: 50%;
            background-color: gray;
        }
      
    </style>

    <!-- 内联元素padding断行 -->
<div class="box">
    <span>内有若干文字</span>
</div>

 

 内联元素默认的高度完全受font-size大小控制   所以把高度设置为0 即可

 <style>
        .box{
            border: dashed red 1px;
            width: 200px;
            height: 300px;
            margin-top: 200px;
            margin-left: 100px;
        }
       .box span{
           /* 
           如果是一个空的内联元素，里面没有任何文字 仅仅是一个span标签
           padding:50% 相对宽度计算，应该是正方形，结果是不是正方形
           因为内联元素的垂直padding会让 "幽灵空节点"显现 
           如果把"幽灵空白节点" 高度变成了0；宽 高就会一样 
           内联元素默认的高度完全受font-size大小控制
            */
            padding: 50%;
            background-color: gray;
        /*     内联元素默认的高度完全受font-size大小控制 */
            font-size:0;
        }
      
    </style>

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

 
标签元素的内置padding
1·ol / ul 列表内置padding-left 但是单位是px 而不是em   
因px是绝对单位，如果列表中的font-size 很小 或很大 时，则<li> 元素的项目符号（点或数字）就会<ul> <ol>元素的左边缘 很开 或项目符号直接跑到<ul> <ol>的外面去
所以当font-size 是12px 至14px时，22px是比较好的一个padding-left 设定值  所有的浏览器都能正常显示，且贴近边缘

 ol,ul{padding-left: 22px;}

 

 

2.表单元素内置padding
所有浏览器<input> / <textarez> 输入框内置padding
所有浏览器<button> 按钮内置padding
所有浏览器<radio> /<checkbox> 单复选框无内置padding
部分浏览器<select>下拉内置padding ，如果Firefox  IE8及以上版本浏览器可以设置padding

<button>按钮元素的padding 最难控制
在Ghrome浏览器下  直接设置padding：0  padding就变成了0

 button{padding: 0;}

 

 

在Firefox浏览器下  即使设置了padding :0  但对于Firefox 左右还是有padding 所以要Firefox的专属属性

 button::-moz-focus-inner{padding: 0;}

 

 

在IE7浏览器下  字体越多 左右padding逐渐变大

    button{overflow: visible;}

 

 

 按钮padding 与 高度计算 不同的浏览器 千差万别
一般很少用<button>按钮作为点击按钮，而是使用<a》标签来模拟
但表单中，有时按钮是自带交互行为的，<a>标签无法模拟
解决方法：即是一个兼容效果好，且是一个语义良好行为保留  使用<label>
                  <label>元素的for属性值 和<button>元素的id值对应即可

 <style>
        button{
         position: absolute;
         clip: rect(0 0 0 0);
        }
        label{
            display: inline-block;
            line-height: 20px;
            padding: 10px;
        } 
    </style>
  
   <button id="btn"></button>
   <label for="btn">按钮</label>
 

 

 

---

---

---

 

三道杠 和 白眼

  <style>
        .box{
            width: 150px;
            height: 30px;
            background-color: currentColor;
            border-top: 30px solid;
            border-bottom: 30px solid;
            padding: 30px 0;
            background-clip: content-box;
        }
       
        .eye{
            width: 200px;
            height: 200px;
            background-color:currentColor;
            border-radius: 50%;
            padding: 10px;
            border:10px solid;
            background-clip: content-box;
        }
    </style>

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