额外的CSS在div上增加了额外的间距

Question

我目前有以下代码：

    <div id="img_preview_text_container" style="width: 376px; height: 75px; top: 156px; left: 50px; color: rgb(255, 0, 0);">
  <div id="customOnePreviewText" style="font-family: Oklahoma; width: 376px; height: 75px;">FABO</div>
</div>

Css就像这样：

#customOnePreviewText {
  margin: 0;
  position: absolute;
}

#img_preview_text_container {
  position: absolute;
  display: flex;
  align-items: center;
}

这给了我一些看起来不错的类型。
我需要将这种类型动态地放入容器中。类型始终会更改，因此我运行了一些名为text fit js

的代码

运行此js方法后，html代码现在是这样：

        <div id="img_preview_text_container" style="width: 376px; height: 75px; top: 156px; left: 50px; color: rgb(255, 0, 0);">
  <div id="customOnePreviewText" style="font-family: Oklahoma; width: 376px; height: 75px; text-align: center; white-space: nowrap;">
    <span class="textFitted" style="display: inline-block; text-align: center; font-size: 80px;">FABO</span>
  </div>
</div>

我现在得到这个

文本不再居中，现在该类型下面有一个额外的空格。在运行此textFit.js之前不是这种情况，我可以更改些什么以消除多余的间距并使它居中？

Answer 1

尝试在#customOnePreviewText中添加line-height：1

<div id="customOnePreviewText" style="font-family: Oklahoma; width: 376px;line-height:1;">FABO</div>

Answer 2

这是您的id =“ img_preview_text_container”外容器的height属性。将其设置为较低的值或0或“自动”。