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

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

[好]没有包装的文字

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

[Good]文字在包裹<h1>时对齐网格

我跟着@ sled的suggestion在line-height: 0设置了<header>，但这给了我相反的问题：

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

[错]文字在换行<h1>时不会与网格对齐

Answer 1

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

首先，将您的<p>更改为<span>，您可以轻松地将<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>设置为bottom。 <{1}}上设置line-height不是必需的。