首页 > Web开发 > 详细

CSS进阶(三)padding

时间:2018-10-13 16:04:36      阅读:131      评论:0      收藏:0      [点我收藏+]

内联元素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实现的效果

技术分享图片

 

CSS进阶(三)padding

原文:https://www.cnblogs.com/goOtter/p/9775953.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!