Additional css is adding extra spacing on div

Question

I currently have the following code:

    <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 is like so:

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

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

This gives me some type that looks fine.
I need to dynamically fit this type into a container. Type always changes so I run some code called text fit js

after I run this js method the html code is now this:

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

I now get this

The text is no longer centered and the type now has an additional space below. This wasn't the case BEFORE I ran this textFit.js what can I change to eliminate that extra spacing and also get it to center?

Answer 1

Try add line-height:1 in #customOnePreviewText

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

Answer 2

It's the height attribute of your id="img_preview_text_container" outer container. set that to a lower value or 0 or 'auto'.