css中padding介绍

1.基本属性

(1) 负值

不存在

(2) 百分比

只相对父级宽度进行计算

.father{

width:100%;

}

.son{

padding:50%;

line-height:0;

}

子元素四边均为50%宽，所以子元素是以父元素为宽度的一个正方形。

(3) px

padding:1px 2px 3px 4px;

表示上内边距为1px,右内边距为2px,下内边距为3px,左内边距为4px。

2.在块状元素和内联元素中的作用

(1) block元素

如果width为auto或者box-sizing:border-box，且padding不是故意设置很大，padding不会影响尺寸。

原因：width为auto时，相当于宽度100%，此时padding只会让内容区域变小，而box-sizing是css3属性，具体看介绍。

如果width不为auto，那么此时padding将会对尺寸造成影响。

如果padding值特别大，那么会对尺寸产生影响。

(2) inline元素

行级元素padding只在水平方向有效，竖直方法只会影响行级元素的背景。

3.应用在布局

两列布局

图一

实现上面的效果，我们可以有两种方法。

第一种

.father{

padding-left:200px;

}

img{

position:absolute;

margin-left:-200px;

}

第二种

img{

float:left;

}

右侧文字

div{

padding-left:200px;

}

我们可以修改上面的padding实现图片和文字之间有间距。

4.padding的小技巧

(1) 三道杠

.threebar{

display:inline-block;

width:60px;

height:10px;

padding:10px 0;

border-top:10px solid;

border-bottom:10px solid;

background:#000;

background-clip:content-box;

}

(2) 移动端自适应的1:1头图

.header-img{

padding:50%;

background:url(...);

background-size:100%;

}

图二

(3) 分割线

.line{

padding:16px 6px 2px;

margin-left:12px;

font-size:0;

border-left:solid 2px;

}

(4) 按钮的兼容性

button标签在不同浏览器中有很大的兼容性差异，所以我们可以用label来替代button，例如：

提交

label{

display:inline-block;

padding:10px 20px;

}

button{

position:absolute;

z-index: -1;

}