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

Question

当我在测试我的网站时调整浏览器的 window 高度时，有一个水平 隐形线切入我的 h1/h2 文本。 根据我的研究，这似乎是由于线高造成的。

我的想法：

1. 当我不设置行高时，我的 h1/h2 高度呈现为 0px。 中间的p标签好像没问题，不明白为什么？

2. 当它确实有行高时，h1/h2 的文本似乎是容器的偏移量。 当我在 devtools 中突出显示 h1 时，文本高于框，在边距之外。

3. 当我调整 window 的大小时，切入我的文本的“隐形线”似乎在同一个位置，而我的文本随着页面大小的调整而上下移动。 所以当隐形线在 h2/h1 的行之间时，页面看起来很正常。

4. 我有一个动画数字的脚本，将 innerHTML 设置为下一个数字。 也许 .innerHTML 的使用搞砸了？ 当 animation 发生时，有多条“不可见的线”，然后当我调整 window 的大小时，除了一条之外，它们都消失了。

抱歉描述不好，但我尽力了。 有人能指出我正确的方向吗？

<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

我无法添加评论，所以添加答案，你不能使用 box-sizing 来解决这个问题吗？ https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

这应该会迫使 h1/h2 留在盒子内，而不是切割它的一部分。