css - 内联元素不环绕到基线网格

换行时，我无法在<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>之间换行时未与网格对齐


[良好]文本通过<h1>换行时与网格对齐



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

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


[错误]文本通过<h1>换行时未与网格对齐

最佳答案

垂直对齐默认为基线，但从其父级获取其“印刷术”特征。 <header>没有任何要传递给其子项的内容，因此将其保留为默认值。但是，由于您要查找#tag元素以与您的<h1>元素进行调整，因此请尝试以下操作：

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

然后将<p>放在<span>标记内

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