複数行の段落に要素がある場合<sup>、段落に設定した行の高さに関係なく、上付き文字の行の上部の行間隔は他の行よりも広くなります。
これは、1 行に 1 つずつある段落がたくさんあるという意味ではありません。複数の行に折り返すのに十分なコンテンツを含む段落が 1 つあります。テキストのどこか (どこでも) に<sup>または がある可能性があります<sub>。これにより、上または下に余分なスペースが追加され、その行の行の高さに影響します。段落の行の高さを大きく設定しても、問題は変わりません。行の高さは増加しますが、余分なスペースはそのまま残ります。
一貫性を保つにはどうすればよいでしょうか。つまり、 a が含まれているかどうかに関係<sup>なく、すべての行の間隔を同じにするにはどうすればよいでしょうか。
ソリューションはクロスブラウザである必要があります（IE 6+、Firefox、Safari、Opera、Chrome）
ベストアンサー1
line-height はこれを修正しますが、かなり大きくする必要があるかもしれません。私の設定では、line-height を約 1.8 に増やさないと、<sup>干渉しなくなりますが、これはフォントによって異なります。
一貫した行の高さを得るための 1 つの方法は、デフォルトの代わりに独自の上付き文字スタイルを設定することですvertical-align: super。これを使用するとtop行ボックスには何も追加されませんが、収まるようにフォント サイズをさらに小さくする必要がある可能性があります。
sup { vertical-align: top; font-size: 0.6em; }
試すことができるもう 1 つのハックは、ポジショニングを使用して、行ボックスに影響を与えずに少し上に移動することです。
sup { vertical-align: top; position: relative; top: -0.5em; }
もちろん、行の高さが十分でない場合は、上の行に衝突するリスクがあります。