深入理解CSS：padding

1. padding与元素的尺寸

   对于块级(block)元素

   padding会影响元素的尺寸；但是当width:auto或者box-sizing:border-box;时，padding不会影响元素的尺寸(有例外！)，只会压缩内容区域的尺寸，但是如果padding的尺寸过大时，也会影响元素尺寸。

   总结：

   1. padding值暴走，一定会影响元素尺寸
   2. width非auto并且box-sizing非border-box时，padding影响尺寸
   3. width为auto或box-sizing为border-box，同时padding值没有暴走，不影响尺寸

   对于内联(inline)元素

   水平padding影响元素尺寸，垂直padding不影响尺寸，但是水平和垂直padding都会影响元素的背景区域大小，会影响scrollHeight。

   应用：

   实现高度可控的分隔线

   1 2 3 4 5 6 7 8 9

   注册<span></span>退出登陆 <style> span { padding: 10px 6px 1px; /*设置分割线距离右边的位置以及长短*/ margin-left: 12px; /*设置分隔线距离左边的位置*/ border-left: 2px solid; /*实现分隔线*/ font-size: 0; } </style>

2. padding负值与百分比值

   padding不支持任何形式的负值

   对于块级元素

   padding的百分比值与margin类似，均是相对于父元素的宽度计算的。

   应用：

   实现一个正方形：

   1 2 3

   div { padding: 50%; }

   移动端的正方形头图可以使用这种方法，兼容性比较好。

   对于内联元素

   1. 同样相对于宽度计算
   2. 默认的高度宽度细节有差异

      空的内联元素加padding为50%时，高宽也不相等，因为inline元素的垂直padding会让“幽灵空白节点(strut)“显现。设置”font-size:0;”可以解决。

   3. padding会断行

      当标签内用文字时，如果文字换行了，padding也会跟着文字换行。

3. 标签元素的内置padding

   1. ol/ul列表

      元素很多内置margin/padding值一般都以em为单位，但是ol/ul元素内置padding-left的单位是px不是em，例如在chrome中是40px；所以如果字号很小，间距就会很开，如果字号很大，序号就会爬到容器外面。

      技巧：网页文字一般大小是12-14px，ol/ul的padding设置为22-25px比较对齐。

   2. 表单元素的内置padding
      • 所有浏览器input/textarea输入框内置padding
      • 所有浏览器button按钮内置padding
      • 部分浏览器select下拉内置padding，如firefox IE8+可以设置padding
      • 所有浏览器radio/checkbox单复选框无内置padding
      • button按钮元素的padding最难控制！

        chrome浏览器没问题

        firfox设置padding:0左右仍然有padding，button:-moz-focus-inner { padding: 0}可以解决。

        padding高度的计算各个浏览器不兼容，解决方案：

        <a>标签模拟

        表单需要用内置<button>时，可以用<label>标签解决：

        1 2	<button id="btn"></button> <!--将button标签”可访问性隐藏“--> <label for="btn">按钮</label>

4. padding与图形绘制

   实现三道杠图形：

   大专栏  深入理解CSS：paddinger"> 1 2 3 4 5 6 7 8 9 10 11

   <div class="line-tri"></div> .line-tri { width: 150px; height: 30px; padding: 15px 0; border-top: 30px solid; /*第一道杠*/ border-bottom: 30px solid; /*第二道杠*/ background-color: black; /*第三道杠*/ background-clip: content-box; /*CSS属性，让背景只存在于盒子的内容区域*/ }

   实现白眼效果：

   1 2 3 4 5 6 7 8 9 10

   <div class="eye"></div> .eye { width: 150px; height: 150px; padding: 10px; border: 10px solid; border-radius: 50%; background-color: black; background-clip: content-box; }

5. padding布局实践

   • 1:1布局的头图

     padding:50%;

   • 配合margin实现等高布局
     

     1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

     .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; }

   • 两栏自适应布局

     padding在容器上:

     1 2 3 4 5 6 7 8 9 10 11 12

     <div class="pbox"> <img src="mm.jpg"> 文本内容 </div> .pbox { padding-left: 120px; } .pbox img { float: left; margin-left: -120px; }

     padding在子元素上:

     1 2 3 4 5 6 7 8 9 10 11

     <div> <img src="mm.jpg"> <div class="auto">文本内容</div> </div> img { float: left; } .auto { padding-left: 120px; }

     ?

原文地址：https://www.cnblogs.com/liuzhongrong/p/12257911.html