利用padding——实现高度可控的分隔线
2018-06-24 01:48:08来源：未知 阅读 ()
一.实现分隔线的方法（未理解：不是说span元素垂直方向设置怕padding不影响吗？）
html：
1 <div> 2 登陆<span></span>注册 3 </div>
css：
1 .span{ 2 padding: 12px 6px 1px;/*这里通过改变第一个参数和第三个参数可以调节风隔线的的上下高度，分别是padding-top和padding-bottom*/ 3 margin-left:12px; 4 border-left:2px solid #000; 5 font-size: 0; 6 }
实现原理：打开chrome浏览器开发者工具进行盒子模型的查看。
图1：将span标签的margin-left设置为12px，对应效果如图1。
图2：为使分隔线左右两边空白对称，这里将span的padding-left和padding-right都设置为6px，因为span中没有内容，所以加起来一共是12px，与margin-left相同。
图3：定义span元素的左边框作为分割线。
图4：至此，通过调节padding-top和padding-bottom，来撑大或是减少盒子的整体高度，以此来调节分隔线。
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
下一篇：less学习笔记 27/8/17
- position: sticky实现导航栏下滑吸顶效果 2020-05-30
- Vue 结合html2canvas和jsPDF实现html页面转pdf 2020-04-25
- 10.布局:两栏和主区域在后的三栏布局，实现侧边栏和主区域伪 2020-04-12
- 5.通过定位实现二级菜单 2020-04-10
- HTML + CSS 布局实现全屏布局 2020-04-10
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
