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中水平垂直居中(两种方法)
507 3
|
前端开发
css实用技巧——给锚点定位添加偏移
css实用技巧——给锚点定位添加偏移
386 3
|
前端开发
css 实用技巧 —— 永远居中的弹窗
css 实用技巧 —— 永远居中的弹窗
97 2
|
前端开发
css实用技巧——绝对定位元素的水平垂直居中
css实用技巧——绝对定位元素的水平垂直居中
159 2
|
前端开发
css 实用技巧 —— 文字和图标垂直居中对齐(四种方法)
css 实用技巧 —— 文字和图标垂直居中对齐(四种方法)
3078 1
|
前端开发
css 实用技巧 —— 使用border属性绘图(三角形、梯形、对话框尖角)
css 实用技巧 —— 使用border属性绘图(三角形、梯形、对话框尖角)
254 1
|
前端开发
CSS padding(填充)
CSS padding(填充)。
738 1
|
前端开发
css实用技巧——异步加载图片时,在图片完成加载前,鼠标悬浮到占位图片上时显示图片的alt信息
css实用技巧——异步加载图片时,在图片完成加载前,鼠标悬浮到占位图片上时显示图片的alt信息
129 0
|
前端开发 JavaScript API
鲜为人知的CSS实用技巧
鲜为人知的CSS实用技巧
185 0
|
前端开发 容器
前端祖传三件套CSS的盒模型之padding
前端开发中,CSS是不可或缺的一部分。对于初学者来说,CSS的盒模型是一个必须掌握的概念。其中,padding作为盒模型的一部分,控制了盒子内部内容与边框之间的距离。本文将讲解padding的用法,并提供实例进行演示。
673 0

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    219
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    214
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    153
  • 4
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
    126
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    260
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    390
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    170
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    108
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    179
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    246