将h1文本对齐框的底部

Question

如何将h1框中的文本对齐到其底部。

<h1 class="woocommerce-products-header__title page-title">All</h1>

这是当前的CSS：

    h1.woocommerce-products-header__title, h1.entry-title {
        font-family: 'Noe Display Bold', Times, serif;
        text-transform: uppercase;
        font-size: 24px;
        letter-spacing: 3px;
        border-bottom: 1px solid #000;
        padding-bottom: 7px;
        line-height: 1;
    }
    h1.entry-title {
        text-transform: none;
    }

我正在使用Ubuntu上的Chrome版本81.0.4044.92进行检查。

Answer 1

好像您看到的是行高。因此，您的解决方法可能是：line-height: 1。 但是当您的H1会包裹长文本时，这将导致文本无法阅读。

（假设您检查了底部填充）