<sup>複数行の<p>タグにタグがある場合、上付き文字が付いている行の行間隔は、行の高さに関係なく、他の行よりも大きくなり<p>ます。
明確にするために編集する：<p>s がたくさんあるわけではなく、それぞれが1行にあります。<p>複数行に折り返すのに十分なコンテンツが含まれているシングルがあります。本文のどこかに（どこでも）<sup>またはがあります<sub>。これは、上または下に余分なスペースを追加することにより、その行の行の高さに影響します。上の行の高さを大きく設定し<p>ても、問題は変わりません。行の高さが増加しますが、余分なスペースは残ります。
どのようにして一貫性を持たせることができますか。つまり、すべての行にaが含まれているかどうかに関係なく、すべての行の間隔が同じ<sup>ですか？
ソリューションはクロスブラウザである必要があります（IE 6 +、FF、Safari、Opera、Chrome）
回答:
line-heightはそれを修正しますが、それをかなり大きくする必要があるかもしれません：私の設定では<sup>、それが干渉しなくなる前にline-heightを約1.8に増やす必要がありますが、これはフォントごとに異なります。
一貫した行の高さを取得するための1つの可能なアプローチは、デフォルトの代わりに独自の上付きスタイリングを設定することですvertical-align: super。これを使用topすると、ラインボックスに何も追加されませんが、フォントサイズをさらに縮小して、収まるようにする必要がある場合があります。
sup { vertical-align: top; font-size: 0.6em; }もう1つのハックは、位置決めを使用して、ラインボックスに影響を与えずに少し上に移動することです。
sup { vertical-align: top; position: relative; top: -0.5em; }もちろん、これには十分な行の高さがなければ、上の行にクラッシュする危険性があります。
vertical-align: bottom（それだけではそれほど多くは得られませんがtop）、そしてposition:relative;肯定的な状況top。
sup {
line-height: 0;
/* The following rules (or similar) likely come from browser
* style and are not needed
*/
font-size: 0.83em;
vertical-align: super;
}トリックは、<sup>'の行の高さを0に設定することです。@ Scottは通常の方法を使用すると言いましたが、これは常に機能するとは限りません。
つまり、上付きテキストに対応するために周囲のテキストの行の高さを変更する必要はありません。IE7 +と他の主要なブラウザでこれをテストしました。
line-height属性との競合を防ぎます。line-heightもちろん、全体が小さく設定されている場合でも、前の線との交差が発生する可能性があります。
line-height: 100%この場合に使用します。
line-height0、1、1em、100％です。これらはすべてChromeとFirefoxで確実に機能します。
私は同じ問題を抱えており、与えられた答えのどれもうまくいきませんでした。しかし、私は私のために働いた修正を含むgit commitを見つけました：
sup {
font-size: 0.8em;
line-height: 0;
position: relative;
vertical-align: baseline;
top: -0.5em;
}<sup>タグが2行の間隔に影響を与える理由は、いくつかの要因に関係しています。要素は、行の高さ、通常のフォントに対する上付きのサイズ、上付きの行の高さ、そして最後に、上付きの一番下が何に揃っているか...設定した場合...行の高さ通常のテキストの「トンネルバンド」（つまり、私がそれと呼んでいるもの）に135％を挿入すると、通常のテキスト（100％）に35％の白が埋め込まれます。段落の場合、これは次のようになります。
p
{
line-height: 135%;
}上付き文字をホワイトパッドしない場合（つまり、行の高さを0に保つ）、上付き文字には独自のテキストの幅しかありません。例70％）そして通常のテキストの中央（text-middle）に揃えると、問題を解消して上付き文字のように見える上付き文字を取得できます。ここにあります：
sup
{
font-size: 70%;
vertical-align: text-middle;
line-height: 0;
}このjsfiddleによって例示されるように、私はここで提案されたソリューションを好みます：
CSS：
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.2em;
}
sub {
top: 0.2em;
}HTML：
<span>The following equation is perhaps the most well known of all: </span><span id="box">E<sub>a</sub> = mc<sup>2</sup></span><span>. And it gives an opportunity to try out a superscript and even throw in a superfluous subscript! I'm sure that Einstein would be pleased.</span>.このソリューションの優れた点は、上付き文字と下付き文字の垂直位置を調整して、上または下の線との衝突を回避できることです...上記では、0.2em要件に合わせてを増減するだけです。
すべての行を高くするには、上付き文字のある行と同じようにするline-heightには、段落全体に大きな行を定義します
<p style='line-height:150%'>またはあなたが望む効果を与えるどんな値でも。
奇妙に見えるかもしれませんが、それはあなたがあなたの要件を説明した方法です。
編集：1つだけが他よりも垂直方向のスペースを必要とするときにすべての行を同じように見せるには、段落内のすべての行をより高くする必要があります。
私が言ったように、これは魅力的な解決策ではないかもしれません。たぶん、下付き/上付きのテキストだけを小さくするスパンで何かを行うことができますが、それ以外には、あなたが望むものを達成できるとは思えません。しかし、私は他の誰かの解決策を見たいのですが。
EDIT2：ちなみに、私は含む小さなHTMLファイルを試しました
<html>
<head>
<title>line-height</title>
<style>
p {
line-height : 1.5em;
width : 25em;
}
</style>
</head>
<body>
<p>Mary had a little lamb, its fleece<sup>1</sup> was white as snow,
and everywhere that Mary went, the lamb<sub>2</sub> was sure to go.
</p>
</body>
</html>そして、FF3.0.14とKonquerorの行はすべて同じ高さです（他のブラウザーでは話せません）。
私はline-heightを使用しています。上付き文字は通常、上付きです。Safari、Chrome、Firefoxでうまく機能しますが、IEについてはわかりません。