1

<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>
<h1> で改行するとテキストが適切に折り返されます


@ sledの提案line-height: 0に従ってonを設定し<header>ましたが、逆の問題が発生しました。

[良い] と の間で折り返すと、テキストがグリッドに揃えられます<h1>。<p>
ここに画像の説明を入力

[悪い] テキストが折り返されたときにグリッドに合わせられない<h1>
ここに画像の説明を入力

4

2 に答える 2

0

に設定vertical-alignし<p>ます bottom。オンline-heightに<header>する必要はありません。

于 2013-05-22T20:19:30.390 に答える
0

垂直方向の配置はデフォルトでベースラインになりますが、その親から「タイポグラフィ」の特性を取得します。<header>その子に渡すものは何もないため、デフォルト値のままです。#tagしかし、要素に合わせて調整する要素を探しているので<h1>、これを試してください：

まず、 a を a に変更します。a<p>を a<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;
}
于 2013-05-22T19:00:25.450 に答える