padding会增加元素尺寸,padding:0 15px;
padding不会影响元素尺寸:box-sizing:border-box padding:0 15px;(此时,外边框的宽不会变化,内容缩小)
如果左右的padding值比width还要大,那么还是会影响元素尺寸的。
对于inline水平元素:水平padding影响尺寸,垂直padding不影响。
如果加上背景色,
高度可控的分割线:
直接使用字符:注册|退出登录
inline-block控制:注册 | 退出登录
使用inline padding
注册<span></span>退出登录
span{ padding:16px 6px 1px;margin-left:!2px; border-left: 2px solid; font-size:0}
padding的负值和百分比值:
padding的百分比是相对于宽度计算的。
实现应正方形:div{padding:50%}
比如实现app页面,用H5,那么怎么才能适应所有屏幕呢,实现一个正方形:
padding:50% ; 兼容性会更好。
padding还会出现断行:比如div里面有文字,padding:50% ,不够宽的话,文字会掉下来,设置个背景色就更明显看出来了。
标签元素的内置padding:
元素很多内置的一些padding值,尤其是margin值,基本上都是以em为单位,
平时的网页字体大小:12px 14px
但是用padding-left的话: 22px --25px
所有浏览器的input、textarea输入框内置padding值(设置了padding也没用)
所有浏览器的按钮有内置padding【chrome可以;火狐下设置padding:0;左右依然有padding。此时:button::-moz-focus-inner{padding:0;}此时真的padding为0l了;IE浏览器:IE7文字越多,左右的padding越大button:{overflow:visible};padding与高度的计算是不兼容的,所以button的兼容性不好,以后要用a标签去模拟按钮,
button表单按钮padding:
<button id="btn"></button>
<label for="btn">按钮</label>
label{
display:inline-block;
inline-height:20px;
padding:10px;
}
这种方法,IE7\8 chrome firefox都兼容。
对于button,可以决定定位到之外,或者z-index藏在背景之下。
】
部分浏览器select下内置padding,比如火狐、IE8+可以设置padding
【padding可以用来绘图】
可以使用padding来实现三道杠{三}(一般浏览器都会有)
可以让背景只在内容区域显示:
<div class="line-tri"></div>
.line-tri{
width:150px;height:30px;
padding:15px 0;
border-top:30px solid;
border-bottom:30px solid;
background-color:currentcolor;
background-slip:content-box;
}
案例二:用HTML实现一个圆:
<div class="eye"></div>
.eye{
width:150px;height:30px;
padding:10px;
border:10px solid;
border-radius:50%;
background-color:currentcolor;
background-slip:content-box;
}
【padding构建固定比例】
padding实现两栏自适应布局: