首页 > 代码库 > CSS深入了解之padding

CSS深入了解之padding

一、padding影响元素尺寸

对于block水平元素

  1. padding值大到一定境界,一定会影响尺寸;
  2. width非auto,padding值会影响尺寸(padding值越大,元素看起来越小);
  3. width:auto或box-sizing:border-box;同时padding值没有特别的大,不影响尺寸

对于inline水平元素

水平padding会影响尺寸,垂直padding不影响尺寸,但是会影响背景颜色(占据空间变大)

使用这一特性,可以实现高度可控的分割线

/*使用inline padding实现     注册 | 退出登录 */

<!--------------HTML代码-------------->

注册<span></span>登录

<!--------------CSS代码-------------->

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

二、padding的特性

1、padding不支持任何形式的负值
2、padding百分比相对于宽度计算
/* block元素实现移动端屏幕题图占一半 */

<div class="container">
     <div class="example">
           <h2>padding..</h2>
           <h3>margin...</h3>
    </div>
</div>

<!---------------CSS代码--------------->
.container { padding:50%; //使图片占据移动端屏幕的一半,不用计算各种移动端设备的宽和高 background: url(exp.jpg); background-size: 100%; position:relatvie; } .example { position:absolute; top:0; right:0; bottom:0; left:0; }//文字充满整个屏幕显示
3、inline水平元素的padding百分比值
    .同样相对于宽度计算
    。默认的高度宽度细节有差异
    。padding会断行
inline就算是空白元素,padding高和宽也不想等
是因为:inline元素的垂直padding会让“幽灵空白节点”显现,也就是规范中的"strut"出现。

三、标签元素内置padding的使用

1、ol/ul列表

i.ol/ul元素内置padding-left,但是单位是px而不是em;

ii.所以如果字号很小/很大,间距就会很开 (平时开发font-size:是12/14,padding-left:22/25px相对合适)

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

3、所有浏览器botton按钮内置padding

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

5、button按钮元素的padding最难控制!

在不同浏览器上使用不同的padding

i.chrome浏览器 padding:0;即可以

ii.FireFox浏览器设置padding:0 左右依然有padding! 可以设置 button:-moz-focus-inner{padding:0;}

iii.IE浏览器下 按钮文字越多,左右padding逐渐变大 button{overflow:visible;}

  • padding与高度计算的不兼容

!!!更好的是利用<label>标签模拟按钮,但是有时需要button提交,所以,利用<button>的可用性并可访问性隐藏

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

label{
   display:inline-block;
   line-height:20px;
   padding:1px;
}
#btn{ z-inde:-1;//藏在背景色之下 }
或者#btn{ absolute:-999em;//藏在屏幕之外}

四、padding与布局

1、使用百分比单位构建固定比例布局结构
2、配合margin实现等高布局
3、实现两栏自适应布局

/* padding设置在容器上*/

技术分享
 /*  padding设置在容器上*/
<div class="pbox">
    <img src="abc.jpg">本例子实现的是,图片宽度固定,然后后面的文字自适应的效果。原理如下:
       容器有个固定的padding-lfet值,此时图文应该在120px处显示,但是,由于图片margin负值浮动(或者绝对定位)到容器左上角,因此,文字.../>
</div>

<!------------------CSS代码---------------->

.pbox{ padding-left:120px;//图文距离容器边缘120px处显示
}
.pbox img{
      float:left;//让文字浮动,所以不占据空间;
      margin-left:-120px;//图片与文字之间的距离
}

/* padding在子元素上 */

技术分享

 /*  padding在子元素上   */

<div>
   <img src="abc.jpg">
   <div class="auto">本例子实现的是,图片宽度固定,然后后面文字信息自适应的效果。
原理如下:两栏元素均有自己的标签,其中文字栏有个固定的padding-left值,此时文字应该在距离容器120像素处显示,但是,由于图片浮动,不在流中,所以文字。。。</div> </div> <!----------------------------CSS代码-----------------> img{ float:left;//破坏了容器 } .auto{ padding-left:120px;//设置padding值,使其距离容器边缘120px显示; }

 


 

 

CSS深入了解之padding