Html 如何使用CSS解释文本的嵌入填充/边距

我想实现两个元素垂直接触的效果。我遇到的困难是如何计算嵌入字体中的填充/边距。例如，使用鼠标在此文本中选择一个单词。注意上面和下面的间距？现在参考我的困难，看看这张图片

我希望我们创建的文本位于下面的剪切文本块上。因此，白色连接。如何做到这一点？我还需要它们通过缩放保持连接

这是我的代码，一些样式是在其他文件中完成的，但这并不重要，除非您尝试运行它

<template>
    <div class="wrapper">
        <div class="page-header header-filter clear-filter header-image md-layout">
            <h1 class="heading" >WE CREATE</h1>
            <div class="cut-text">EXPERIENCES</div>
            <h2 class="subheading">THAT TELL YOUR STORY</h2>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
        }
    }

}
</script>

<style lang="scss">
.header-image{
    background-image: url("../assets/img/bg12.jpg");
}
.cut-text {
background-color: white;
border-radius: 10px !important;
color: black;
font-size: 10vw; /* Responsive font size */
font-weight: bold;
margin: 0 auto; /* Center the text container */
padding: 6vw;
width: 75vw;
text-align: center; /* Center text */
mix-blend-mode: screen; /* This makes the cutout text possible */
}
.heading {
    color: white;
    font-weight: bold;
    font-size: 5vw; /* Responsive font size */
    margin-block-start: 0em !important;
    margin-block-end: 0em !important;
}
.subheading {
    color: white;
    font-weight: bold;
    font-size: 3vw; /* Responsive font size */
}

.md-layout {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}
</style>

---

尽量减少文本的行高css属性，直到您达到正确的文本高度。

问题是，大多数字体都会为大写或字母（如“p”）留出这些间距，因此您不能自动执行此操作

解决方案是将行高设置为零，并手动设置margin属性，在我的例子中是2vw，下面是一个示例

身体 { 字体系列：无衬线； 显示器：flex； 保证金：0； 高度：100vh； 弯曲方向：立柱； } 块 { 弹性：1； } 第一 { 背景：黑色； 颜色：fff； 显示器：flex； 对齐项目：柔性端； 字体大小：3vw； 线高：0； 证明内容：中心； } .第一个h1 { 利润率：2vw； } 第二 { 字体大小：5vw； 显示器：flex； 证明内容：中心； } 示例文本 示例文本

---

为什么是vue.js？@ishidex2该网页是使用vue，js构建的。我没有分享代码，但如果我需要，我希望有合适的观众。我会添加我的代码。是的，但这个问题与vueWill无关。我来试一试，谢谢！但是，随着文本的缩放，这种情况会发生怎样的变化？我试图使行高度等于5vw，与文本高度匹配，但仍然存在间距。您可以用您的尝试编辑代码吗？这样我可以试着做一个片段。没问题，我希望这对你有帮助。如果它对你有用的话，就不再需要了。