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

Question

这是一个很难解释的概念，但是我想实现两个元素垂直接触的外观。我遇到的困难是要考虑字体中嵌入的填充/边距。例如，使用鼠标在此文本中选择一个单词。请注意上方和下方的间距？现在参考我的困难，看看这张图。

我希望文本“ WE CREATE”位于下面的剪切文本区域。因此，白色已连接。有谁知道该怎么做？如果需要，我可以共享代码，但是我不确定它是否有用。我还需要他们通过扩展保持联系。

这是我的代码，某些样式是在其他文件中完成的，但这无关紧要，除非您尝试运行它。

<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>

在此先感谢您的任何建议/帮助！

Answer 1

尝试减小文本的line-height css属性，直到达到正确的文本高度。

Answer 2

问题在于，大多数字体都会在大写字母或字母'p'之类的字符之间留出空隙，因此您不能只是自动执行

解决方案是将line-height设置为零并手动设置边距属性，在我的情况下为2vw，这是示例

body
{
   font-family: sans-serif;
   display: flex;
   margin: 0;
   height: 100vh;
   flex-direction: column;
}
.block
{
   flex: 1;
}
.first
{
   background: black;
   color: #fff;
   display: flex;
   align-items: flex-end;
   font-size: 3vw;
   line-height: 0;
   
   justify-content: center;
}
.first h1
{
  margin: 2vw;
}
.second
{
   font-size: 5vw;
   display: flex;
   justify-content: center;
}

<div class="block first">
   <h1>Sample text</h1>
</div>
<div class="block second">
   <h1>Sample Text</h1>
</div>