css - 内联元素不换行到基线网格

Question

当文本换行时，我无法让我的文本<header>与基线网格对齐。

HTML：

<header>
    <h1>Sample Title</h1>
    <p class="tag">#Tag</p>
</header>

CSS：

header {
    display: block;
    }

h1 {
    display: inline;
    font-size: 36px;
    line-height: 36px;
    margin: 0 24px 0 0;
    }

p {
    display: inline-block;
    font-size: 18px;
    line-height: 36px;
    margin: 0 24px 0 0;
    }

[Good] 不换行的文字

<h1>[坏] 文本在和之间换行时不与网格对齐<p>

[Good] 文本环绕时与网格对齐<h1>

我按照@ sled的建议设置line-height: 0on <header>，但这给了我相反的问题：

<h1>[Good] 文本在和之间换行时与网格对齐<p>

[Bad] 文本环绕时未与网格对齐<h1>

Answer 1

垂直对齐默认为基线，但从其父级获取“排版”特征。<header>没有任何东西可以传递给它的孩子，所以他们留给默认值。但是，由于您正在寻找您的#tag元素来调整您的<h1>元素，请尝试以下操作：

首先，将您的更改<p>为 a <span>，您可以像 a 一样轻松地将 a<span>转换为内联块，<p>而不必再更正所有边距和填充（更清洁的 CSS）。

然后将<span>放在<h1>标签内

HTML：

<header>
    <h1>Sample Title
        <span class="tag">#Tag</span>
    </h1>
</header>

CSS：

h1 {
    line-height: 36px;
    font-size: 36px;
    margin: 0 24px 0 0;
}
span {
    font-size: 18px;
}

Answer 2

设置为 。vertical-align_ 不需要设置。<p>bottomline-height<header>