CSS进阶(三)padding

内联元素padding是有作用的

设置内联级元素如a的垂直方向的padding,不仅能够增加点击区域的大小,也不会影响到整体的布局

padding的百分比值

padding的百分比值无论是水平方向还是垂直方向,均是相对于宽度计算的

内联元素的垂直Padding会让幽灵元素空白节点显现

小技巧

(1)<ul><ol>设置padding-left:22px是一个比较好的padding-left值

(2)很多表单元素内置padding,比如Button,但是在不同浏览器下的实现效果并不一样,替代方案:

<button id="btn"></button>
<label for="btn">按钮</label> 

<style>
   button {
 position: absolute;
 clip: rect(0 0 0 0);
}
label {
 display: inline-block;
 line-height: 20px;
 padding: 10px;
} 
</style>

 结合background-clip实现的效果

 

posted @ 2018-10-13 15:50  CodingSherlock  阅读(145)  评论(0编辑  收藏  举报