css padding属性颜色,css属性padding

001

Padding对行内元素的影响,在水平方向影响尺寸,在垂直方向不影响尺寸,但是会影响背景，设置padding过大会让文字换行

对于block元素

Padding暴走,一定影像元素尺寸

Width非auto, 一定影像元素尺寸

Width为auto或者box-sizing为border-box,同时padding没有暴走,不影响width，height尺寸

002

块元素padding设置百分之五十能够使容器变成正方形。

padding不支持任何形式的负值，百分比值相对于宽度进行计算

内联空元素，上下边距，(content area font-size:0;)，宽高不等，

003

标签元素的内置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与高度计算的不兼容

button{

line-height:20px;

padding:10px;

border:none;}

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

按钮

label{

display:inline-block;

line-height:20px;

padding:1px;

}

btn{ z-inde:-1;//藏在背景色之下 }

或者#btn{ absolute:-999em;//藏在屏幕之外}

004

583462e50001a85912800720.jpg

58726ea700014fe507200404.jpg

005

padding与布局

1、使用百分比单位构建固定比例布局结构

2、配合margin实现等高布局

3、实现两栏自适应布局

padding在容器上

本例子实现的是，图片宽度固定，然后后面文字信息自适应的效果。原理如下:两栏元素均有自己的标签，其中文字栏有个固定的padding-left值，此时文字应该在距离容器120像素处显示，但是，由于图片浮动，不在流中，所以文字。。。

img{ float:left;//破坏了容器

}

.auto{ padding-left:120px;//设置padding值，使其距离容器边缘120px显示；

}