h1/h2 文本被截断并且不在其容器内

Question

When I resize my browser's window height while testing my website, there is a horizontal invisible line cutting into my h1/h2 text. From my research, it seems to be something due to line-height.

Thoughts I had:

1. When I don't set a line-height, my h1/h2 height renders to 0px. The p tag in the middle seems to be fine, I don't understand why?

2. When it does have a line height, the text of the h1/h2 seems to be offset of the container. When I highlight the h1 in devtools, the text is higher than the box, outside of the margins.

3. When I resize my window, the 'invisible line' cutting into my text seems to be in the same spot, while my text moves up and down with the page resizing. So when the invisible line is between lines of the h2/h1, the page looks normal.

4. I have a script animating numbers that sets the innerHTML to the next number. Maybe the use of.innerHTML is screwing something up? There are multiple 'invisible lines' when the animation happens, and then when I resize the window, all but one of them disappears.

Sorry for the bad description, but I did my best. Could someone point me in the right direction?

<section class="experiences-section-two">
        <div class = "redcliff-metrics-1">
            <h1>We Make Redcliff City RP</h1>
            <p>
                Redcliff City RP is a Roblox game in which players can own lavish homes, cruise around in fancy cars,
                decorate their own avatar with free accessories,
                and create their own unique experiences with the plethora of in game activities.
            </p>
            <p>
                Redcliff City RP has been growing since 2021 with constant updates and new features.
                Our thanks to the community's support is the hard work we put into our games.
            </p>
            <div id = "metrics-holder">
                <div class = "metrics-holder-child">
                    <h2 class = "animated" data-target-number = 191>0</h2>
                    <p><em>MILLION</em><br />Total Visits</p>
                </div>
                <div class = "metrics-holder-child">
                    <h2 class = "animated" data-target-number = 31>0</h2>
                    <p><em>THOUSAND</em><br />Peak CCU</p>
                </div>
                <div class = "metrics-holder-child">
                    <h2 class = "animated" data-target-number = 47.4>0</h2>
                    <p><em>MILLION</em><br />Hours Played</p>
                </div>
            </div>
        </div>
    </section>

{
    color: rgb(40,41,42);
    background-color:#f8b543;
    display:flex;
    flex-direction: column;
    align-items: center;
    padding: 4rem 1rem 4rem;
}

.redcliff-metrics-1 {
    padding: 1.5rem;
    max-width: 615px;
    text-align: center;
    min-height: 500px;
}

.redcliff-metrics-1 > * {
    margin:10px;
    line-height: 100%;
}

#metrics-holder {
    display:flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
    font-weight:700;
    margin:50px 0;
}

.metrics-holder-cihld {
    padding:10px;
}

.metrics span {
    display:block;
}

.animated {
    font-size: 3.5rem;
    font-weight: 900;
}

em {
    font-style:normal;
    font-size:24px;
}

.experiences-section-two h1 {
    font-size: 55px;
    line-height: 100%;
}

.experiences-section-two h2 {
    font-size: 48px;
    line-height: 100%;
}

.experiences-section-two p {
    font-size: 18px;
}

const holder = document.getElementById("metrics-holder");
const objs = document.getElementsByClassName("animated");
const overlay = document.getElementById("hamburger-overlay");

function animateValue(obj, start, end, duration) {
  let startTimestamp = null;
  const step = (timestamp) => {
    if (!startTimestamp) startTimestamp = timestamp;
    const progress = Math.min((timestamp - startTimestamp) / duration, 1);
    obj.innerHTML = Math.floor(progress * (end - start) + start)+ '+';
    if (progress < 1) {
      window.requestAnimationFrame(step);
    }
  };
  window.requestAnimationFrame(step);
}

function isScrolledIntoView(el) {
    var rect = el.getBoundingClientRect();
    var elemTop = rect.top;
    var elemBottom = rect.bottom;
    return elemTop < window.innerHeight && elemBottom >= 0;
    
}

function metricsAreInView(){
    if(isScrolledIntoView(holder))
    {
        for(let i = 0; i<objs.length; i++)
        {
            let obj = objs[i];
            animateValue(obj, 0, obj.dataset.targetNumber, 3000);
        }

        removeEventListener('scroll', metricsAreInView);
    }
}

addEventListener('scroll', metricsAreInView);

Answer 1

I can't add a comment so adding an answer, can you not use box-sizing to resolve this? https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

This should then force the h1/h2 to remain within the box rather than cutting part of it.