如何摆脱 div 元素内部不需要的空间？

Question

我在 html 中添加了一个 div 元素。我在里面放了 5 个

h1

，它们并排放置（这样我就可以单独将鼠标悬停在它们上方）。

div 内文本的填充非常大，即使我将其设置为零，因此文本的顶部和底部有一个非常大的空间，这是不需要的。

这是一张图片，所以你知道我在说什么：

这是 HTML 代码：

<div class="rover">
    <h1 class="r rover-t">R</h1>
    <h1 class="o rover-t">O</h1>
    <h1 class="v rover-t">V</h1>
    <h1 class="e rover-t">E</h1>
    <h1 class="r2 rover-t">R</h1>
</div>

这是 CSS 代码：

.rover {
    font-family: 'Noto Sans', sans-serif;
    display: flex;
    border: 1px dashed dodgerblue;
    padding: 0px;
    margin: 0px;
    vertical-align: top;
}

这里是子元素的 CSS 代码：

.rover-t {
    font-size: 130pt;
    color: rgb(255, 80, 80);
    transition: all 0.5s;
}

我已经尝试将边距和填充设置为 0，但这没有帮助：

.rover {
    font-family: 'Noto Sans', sans-serif;
    display: flex;
    border: 1px dashed dodgerblue;
    padding: 0px;
    margin: 0px;
    vertical-align: top;
}

我这样做是为了消除文本顶部和底部的空格，但正如我所说，它不起作用。

空间还在，不太好。

如果您对发生的情况以及如何解决该问题有任何线索，我将非常感激。

提前致谢。

尼尔斯

Answer 1

将

margin: 0;

属性添加到 CSS 中的

.rover-t

类。

.rover-t {
    font-size: 130pt;
    color: rgb(255, 80, 80);
    transition: all 0.5s;
    margin: 0; // Add this
}

每个

h1

元素都会默认设置一个边距。
您可以从其他两个类中删除 padding 和 margin 属性（除非您需要它们用于其他用途）