baseline-shift

概要

インライン要素やSVGテキストの垂直位置を、親要素のベースラインから相対的にシフトさせます。上付き文字や下付き文字の位置調整、数式表記での正確な配置に使用されます。vertical-align と似た機能を持ちますが、より細かい制御が可能です。

対応ブラウザ

基本構文

.superscript {
  baseline-shift: super;
}
.custom-shift {
  baseline-shift: 5px;
}

実務での使いどころ

• 上付き・下付き文字の精密な位置調整

  科学記号や数式の表記で、上付き・下付き文字の位置をピクセル単位で精密に調整できます。

注意点

アクセシビリティ

• ベースラインのシフトは視覚的な変更のみです。上付き・下付き文字には <sup> や <sub> 要素を使用し、意味的な構造も適切に表現してください。

参考リンク

• MDN Web Docs — baseline-shift