1. ホーム
  2. html

[解決済み] HTML <sup /> tag affecting line height, how to make it consistent?

2022-05-08 12:44:22

Question

If I have a <sup> tag in a multi-line <p> tag, the line with the superscript on it has a larger line spacing above it than the other lines, regardless of what line-height I put on the <p> .

Edit for clarification : I doesn't mean I have lots of <p> s, each which is on a single line. I have a single <p> with enough content in it to cause wrapping onto multiple lines. Somewhere (anywhere) in the text there may be a <sup> or <sub> . This affects the line height for that line by adding extra spacing above/below. の行の高さを大きくすると、その行の上下に余分なスペースが追加されます。 <p> この問題には何の変化もありません。行の高さは増加しますが、余分なスペーシングは残っています。

どうすれば、一貫性を持たせることができるのでしょうか。 <sup> を使用しますか?

クロスブラウザ対応(IE 6+、Firefox、Safari、Opera、Chrome)。

解決方法は?

line-heightで解決できますが、かなり大きくする必要があるかもしれません:私の設定では、line-heightを約1.8まで大きくしないと <sup> が邪魔にならなくなりましたが、これはフォントによって異なるでしょう。

一貫した行の高さを得るために可能な方法の1つは、デフォルトの vertical-align: super . もし top を使っても行の枠は増えませんが、文字サイズをさらに小さくして収まるようにする必要があるかもしれません。

sup { vertical-align: top; font-size: 0.6em; }

もう一つのハックは、ラインボックスに影響を与えずに、位置決めを使って少し上に移動させることです。

sup { vertical-align: top; position: relative; top: -0.5em; }

もちろん、ラインハイトが足りないと上の行にぶつかる危険性があります。