-
radio/checkbox不能用padding撑开
查看全部 -
网页文字大小一般为12或14像素，padding-left为22~25px
查看全部 -
<button id="btn"></button> <label for="btn">按钮</label>
label{
display:inline-block;
line-height:20px;
padding:10px;
}
查看全部 -
padding-left:22px;
文字12px/14px
查看全部 -
padding在子元素上
查看全部 -
padding在容器上
查看全部 -
radio/checkbox不能用padding撑开
查看全部 -
改变content area
查看全部 -
1. 使用百分比单位构建固定比例布局结构（正方形）
.div{padding:50%;}2. 配合margin等高布局
/*父盒子*/ .box{ overflow: hidden; resize:vertical; } /*子盒子*/ .child-orange,.child-green{margin-bottom: -600px;padding-bottom: 600px;} .child-orange{ float: left;background: orange; } .child-green{ float: left;background: green; }3. 两栏自适应布局
<div class="box"> <img src="mm.jpg"> words... </div> <div> <img src="mm.jpg"> <div class="auto">words...</div> </div>
/*padding在容器上*/ .box{ padding-left: 120px; } .box img{ float: left; margin-left: -120px; } /*padding在子元素上*/ img{ float：left； } .auto{ padding-left:120px; }查看全部 -
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:black;/*第二道杠*/ background-clip:content-box;/*第二道杠，important*/ }查看全部 -
button表单的padding
1. 对于Firefox，设置padding:0左右依然有padding，所以需设为：
button::-moz-focus=inner{ padding:0; }2. 对于IE7，文字越多，左右padding逐渐变大，所以需设为：
button{ overflow:visible; }3. padding与inline-height不兼容，所以个人技巧：
<button id="btn"></button> <label for="btn">button</label>
然后设置label样式
label{ display:inline-block; inline-height:20px; padding:10px; }查看全部 -
.div{ padding:50%; }可以制作正方形。
但是对于inline元素，垂直padding会让“struct（幽灵空白节点）”出现，所以改成
.inline_div{ padding:50%; font-size:0; }查看全部 -
对于block水平元素，
当width:auto or box-sizing:border-box，padding值没有暴走，不影响尺寸。
padding值暴走，一定会影响尺寸。e.g.当padding大小超过宽高的时候，容器宽度改变，如中间有文字，那么文字以最小宽度显示。
width非auto，padding影响尺寸，容器扩大。
对于inline水平元素，
水平padding影响尺寸，垂直padding不影响尺寸，但是会影响背景颜色（占据空间）。
应用：高度可控的分割线
比如：实现 注册 | 登录，中间的分割线
html：
注册<span></span>登录
CSS：
span{ padding: 16px 6px 1px; margin-left: 12px; border-left: 2px solid; font-size:0; }查看全部 -
paddingleft 22-25比较好，文字大小14px查看全部
-
对于水平inline元素，水平padding影响尺寸，垂直padding不影响尺寸，但当有背景颜色时会影响背景颜色的尺寸。查看全部
举报
0/150
提交
取消