baseline-source
インラインブロック要素やインラインフレックス要素が複数行にまたがる場合、最初の行と最後の行のどちらのベースラインで揃えるかを指定できます。display プロパティの値に応じてデフォルトの動作が異なりますが、このプロパティで明示的に制御できます。精密なテキストレイアウトに役立ちます。
概要
インラインブロック要素やインラインフレックス要素が複数行にまたがる場合、最初の行と最後の行のどちらのベースラインで揃えるかを指定できます。display プロパティの値に応じてデフォルトの動作が異なりますが、このプロパティで明示的に制御できます。精密なテキストレイアウトに役立ちます。
対応ブラウザ
デスクトップ
Chrome 111+
Edge 111+
Safari 未対応
Firefox 115+
モバイル
Chrome Android 111+
Safari iOS 未対応
Firefox Android 115+
基本構文
CSS
.inline-block {
display: inline-block;
baseline-source: first;
}実務での使いどころ
-
複数行インライン要素のベースライン制御
複数行にまたがるインラインブロック要素が周囲のテキストと最初の行で揃うか最後の行で揃うかを明示的に制御できます。
注意点
- Safariでは未サポートのため、ブラウザ間で表示の差異が生じる可能性があります。重要なレイアウトには他の配置手法も併用してください。
アクセシビリティ
- ベースラインの調整は視覚的な変更であり、コンテンツの意味やスクリーンリーダーの読み上げには影響しません。