[解決済み] HTML <sup /> tag affecting line height, how to make it consistent?
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; }
もちろん、ラインハイトが足りないと上の行にぶつかる危険性があります。
関連
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] 横型リストアイテム
-
[解決済み] リンクのように動作するHTMLボタンを作成する方法
-
[解決済み] PHPでHTML/XMLをパースして処理する方法とは?
-
[解決済み] セレクトボックスのプレースホルダーを作成するにはどうすればよいですか?
-
[解決済み] divブロック内のテキストを(水平方向と垂直方向に)センタリングするにはどうすればよいですか?
-
[解決済み] Bootstrapの列をすべて同じ高さにするにはどうしたらいいですか?
-
[解決済み] ボディの高さをブラウザの高さの100%にする
-
[解決済み] input type="file "ボタンのスタイリング
-
[解決済み] HTMLでBase64画像を表示する方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] HTMLにおける'"'エンティティの使用法
-
[解決済み] HTMLページからのリダイレクト
-
[解決済み] How do I style a <select> dropdown with only CSS?
-
[解決済み] HTMLで表示される上下の三角形(軸のない矢印)に使用できる文字は何ですか?
-
[解決済み] WebSocketとサーバー送信型イベントの比較/EventSource
-
[解決済み] HTML5でfloat入力タイプはありますか?
-
[解決済み] input type="date "のフォーマットを変更する方法はありますか?
-
[解決済み] 静的な HTML ページにファビコンを追加する
-
[解決済み] HTMLのレイアウトにテーブルを使用しない理由は?[クローズド]
-
[解決済み] 親ディバイスの高さを指定せずに、子ディバイスの高さを100%にする方法は?