天天看点

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>      
  • 上内边距是 10px
  • 右内边距和左内边距是 3px
  • 下内边距是 1px