CSS padding-blockジェネレーター
論理的なブロックパディング（縦方向）を設定するCSSを生成。
padding-block: 16px;
padding-block-start: 16px; padding-block-end: 16px;
プレビュー
要素（上下のパディングが適用されています）
CSS padding-blockとは？
padding-blockは、書字方向に依存しない論理的なパディング指定です。横書きの場合は上下、縦書きの場合は左右のパディングを設定します。
従来のpadding-top/padding-bottomは物理的な方向を指定するため、多言語対応やwriting-modeの変更に弱い欠点がありました。 padding-blockを使うことで、縦書きレイアウトや異なる書字方向でも自動的に適切なパディングが適用されます。
使い方
- padding-block-start: ブロック方向の開始側（横書きなら上、縦書きなら右）
- padding-block-end: ブロック方向の終了側（横書きなら下、縦書きなら左）
- padding-block: 開始と終了を一括指定（padding-block: 16px 24px;）
メリット
- 縦書き（writing-mode: vertical-rl）への対応が容易
- 論理的なレイアウト設計でメンテナンス性向上
- 将来的なデザイン変更に強い
すべての処理はブラウザ内で行われます。データがサーバーに送信されることはありません。