css实用技巧——利用内联元素的padding实现高度可控的分隔线

简介: css实用技巧——利用内联元素的padding实现高度可控的分隔线

<template>
    <div style="padding: 20px">
        <span>登录</span><span class="register">注册</span>
    </div>
</template>
<style scoped>
    .register:before {
        content: "";
        font-size: 0;
        padding: 10px 3px 1px;
        margin-left: 6px;
        border-left: 1px solid gray;
    }
</style>


padding: 10px 3px 1px;

  • 上内边距是 10px
  • 右内边距和左内边距是 3px
  • 下内边距是 1px


通过改变 padding的上内边距和下内边距的值,即可自定义分隔线的长度(上内边距+下内边距)

目录
相关文章
|
前端开发
css 实用技巧 —— div在div中水平垂直居中(两种方法)
css 实用技巧 —— div在div中水平垂直居中(两种方法)
560 3
|
前端开发
css实用技巧——给锚点定位添加偏移
css实用技巧——给锚点定位添加偏移
454 3
|
前端开发
css 实用技巧 —— 永远居中的弹窗
css 实用技巧 —— 永远居中的弹窗
139 2
|
前端开发
css实用技巧——绝对定位元素的水平垂直居中
css实用技巧——绝对定位元素的水平垂直居中
190 2
|
前端开发
css 实用技巧 —— 文字和图标垂直居中对齐(四种方法)
css 实用技巧 —— 文字和图标垂直居中对齐(四种方法)
3309 1
|
前端开发
css 实用技巧 —— 使用border属性绘图(三角形、梯形、对话框尖角)
css 实用技巧 —— 使用border属性绘图(三角形、梯形、对话框尖角)
322 1
|
前端开发
CSS padding(填充)
CSS padding(填充)。
840 1
|
前端开发
css实用技巧——异步加载图片时,在图片完成加载前,鼠标悬浮到占位图片上时显示图片的alt信息
css实用技巧——异步加载图片时,在图片完成加载前,鼠标悬浮到占位图片上时显示图片的alt信息
173 0
|
前端开发 JavaScript API
鲜为人知的CSS实用技巧
鲜为人知的CSS实用技巧
223 0
|
前端开发 JavaScript 容器
CSS 实用技巧(更新ing)
CSS 实用技巧(更新ing)
248 0
CSS 实用技巧(更新ing)