深入 padding ( button按钮在各个浏览器中的兼容性问题与padding实现两栏自适应布局 )

div { padding: 50%; }  可以实现一个正方形（padding是根据宽度计算的。）

字体通常是 12px---16px的话， padding-left: 22---25px ，是可以的。

 

1. IE浏览器中  button表单按钮 padding

IE浏览器，button按钮文字越多，左右padding逐渐变大。

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

 

2. 解决button按钮在各个浏览器中的兼容问题。

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

label {

        display: inline-block;

         line-height: 20px;

         padding: 10px;

}

/************************************************************************************/

3. padding与图形绘制 ( padding 实现三条杠图形  )

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

.line-tri {

        width: 150px; height: 30px;

       padding: 15px  0;

      border-top:  30px solid;

       border-bottom: 30px solid;