inline+padding技巧：间隔符(分割线)与文字高度不一致，间隔竖线高度缩短方法_CSS学习

资料来源：网络整理时间：2023/3/4 1:03:40 共计：3626 浏览

如图所示，在前端经常需要用到各种间隔符号，用CSS实现应该是最佳办法，当然如果你用图片、用符号都可以实现，但应用起来不如CSS来的那么顺，那么爽！

今天就用CSS来制作这个间隔符，并且让间隔符号垂直居中，并且高度低于前后文字，这样显得干练！

<style>

 *{font-size: 24px;}

 span{padding: 16px 6px 1px; margin-left: 12px; border-left: 2px solid;font-size: 0;}

</style>

注册<span></span>登陆

实现的方法，就是默认使用了inline(span标签就是行内，默认应该算是加了inline)，同时使用padding，来实现间隔符的高度！

如果不是span呢，而是div呢？那就加一个display:inline，再进行padding：

<style>
 *{font-size: 24px;}
 .fuhao{display: inline;padding: 16px 6px 1px; margin-left: 12px; border-left: 2px solid;font-size: 0;}
</style>
注册<div class="fuhao"></div>登陆

一样可以实现上图的效果！

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：padding:50% padding百分比实现正方形_CSS学习 | ·下一条：padding和box-sizing:border-box; 外边框变为内边框_CSS学习