padding详解

padding属性指定了盒的padding区的宽度。'padding'简写属性一次性设置四周的padding，而其它padding属性只设置它们各侧的

padding与元素的尺寸

padding与block和inline元素尺寸

最后一个例子是用padding实现高度可控的分隔线

padding与百分比值

padding百分比值与block元素

padding百分比值与inline元素

在inline元素中,padding:50%产生的不是一个正方形,原因是根据CSS规范,inline元素的垂直padding会让strut出现,strut本质上是一个inline文本,出现在content area区域,为了消除它,要使用font-size:0

标签元素的内置padding

ol/ul列表的内置padding

1. ol/li元素内置padding-left，但是单位是px不是em；

2. Chrome浏览器下是40px；

3. 所以如果字号很小，间距就会很开；字号很大，序号会爬到容器外面

4. 开发过程中为使序号与其他内容对齐，文字大小12px或14px，padding-left为22px至25px

表单元素的内置padding

1. 所有浏览器input/textarea输入框内置padding

2. 所有浏览器button按钮内置padding

3. 部分浏览器select下拉内置padding，如FireFox IE8+可以内置padding

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

button在各大浏览器中去除空隙

button在不同浏览器中高度不同现象及解决方案

我们使用button以及label标签,将button使用绝对定位或者z-index隐藏,然后让label标签for="btnid"指向button的id

padding与图形绘制

三道杠以及眼睛效果

对于三道杠效果来说,透明区域是padding实现的,第一道杠使用border-top,第三道杠使用border-bottom,第二道杠使用background-color:currentColor,为了控制第二道杠不覆盖padding背景色,使用CSS3属性background-clip:content-box

第二个例子同上

padding与布局

移动端1:1头图布局

div{padding:50%;}

配合margin实现等高布局

等高布局

两栏自适应布局

分别在容器上和子元素的两栏自适应布局