JS 设置的 HTML 文本与其他元素重叠

Question

我遇到这个问题，HTML 元素之间的距离似乎是静态的，我不知道如何更改它。例如这里在这里输入图像描述，顶部的文本占用了这么多空间，但是这里几乎与下一个元素相交。在这里输入图像描述

我正在设置这样的内容。

document.getElementById('route').textContent = `${bus.routeInfo.route}- ${headsignData.shortHeadsign}`

我尝试设置填充来修复它，与边距相同，但它似乎不起作用。一切都保持不变。

任何帮助表示赞赏。

Answer 1

为了清楚起见，您需要在问题中添加合适的 HTML 和 CSS 代码。

但是，我想我知道为什么会发生这种情况。

看起来您正在尝试向内联元素添加边距和填充。但是，垂直填充和边距不适用于内联元素。

因此，在 CSS 中，您可能希望将元素转换为块或内联块：

#route {
    display: block;
    /* or, display: inline-block; */
    /* More styles... */
}