# Spacing
新しいクラスを作成せずにレイアウトを更新します。 スペーシングヘルパーは、要素のパディングやマージンを変更するのに便利です。
プレイグラウンドを使って、さまざまなヘルパークラスで何ができるのかを実感してください。 ヘルパークラスがどのように機能するかについての説明は、以下の「どのように機能するか」のセクションを参照してください。
# どのように機能するか
ヘルパークラスは 0から16 までの範囲の要素に margin または _padding_を適用します。 各サイズ増分は、一般的なMaterial Designの間隔に合わせて設計されています。 これらのクラスは、 {property}{direction}-{size} 形式で適用できます。
property には以下の間隔のタイプが適用されます:
m-marginを適用するp-paddingを適用する
direction は、プロパティが適用される側を指定します:
t-margin-topおよびpadding-topの間隔を適用します。b-margin-bottomとpadding-bottomの間隔を適用します。l-margin-leftとpadding-leftの間隔を適用します。r-margin-rightとpadding-rightの間隔を適用します。s-margin-left/padding-left(LTRモードの場合) とmargin-right/padding-right(RTLモードの場合) の間隔を適用します。e-margin-right/padding-right(LTRモードの場合) とmargin-left/padding-left_(RTLモードの場合)_の間隔を適用します。x-*-leftと*-rightの間隔を適用します。y-*-topと*-bottomの間隔を適用します。a- プロパティの間隔を、天地左右すべての方向に適用します。
size は 4px の間隔でプロパティの増分を制御します:
0-marginあるいはpaddingを0に設定し、それらを全て取り去ります。1-marginあるいはpaddingを 4px に設定2-marginあるいはpaddingを 8px に設定3-marginあるいはpaddingを 12px に設定4-marginあるいはpaddingを 16px に設定5-marginあるいはpaddingを 20px に設定6-marginあるいはpaddingを 24px に設定7-marginあるいはpaddingを 28px に設定8-marginあるいはpaddingを 32px に設定9-marginあるいはpaddingを 36px に設定10-marginあるいはpaddingを 40px に設定11-marginあるいはpaddingを 44px に設定12-marginあるいはpaddingを 48px に設定13-marginあるいはpaddingを 52px に設定14-marginあるいはpaddingを 56px に設定15-marginあるいはpaddingを 60px に設定16-marginあるいはpaddingを 64px に設定n1-marginを -4px に設定n2-marginを -8px に設定n3-marginを -12px に設定n4-marginを -16px に設定n5-marginを -20px に設定n6-marginを -24px に設定n7-marginを -28px に設定n8-marginを -32px に設定n9-marginを -36px に設定n10-marginを -40px に設定n11-marginを -44px に設定n12-marginを -48px に設定n13-marginを -52px に設定n14-marginを -56px に設定n15-marginを -60px に設定n16-marginを -64px に設定auto- 間隔を auto に設定
# サンプル
# ブレークポイント
Vuetifyは、 Flexboxを使用する12ポイントのグリッドシステムを備えています。 Spacing は、アプリケーションのコンテンツ内に特定のレイアウトを作成するために使用されます。 特定の画面サイズまたは向きをターゲットにするために使用される5つのメディアブレークポイント（xs, sm, md, lg, xl）で構成されています。 デフォルトの解像度は Viewport Breakpoints テーブルで以下に定義されており、 breakpoint service configをカスタマイズすることで変更できます。
| デバイス | コード | 種類 | 解像度の範囲 |
|---|---|---|---|
| Extra small | xs | 小型から大型のスマホ | < 600px |
| Small | sm | 小型から中型のタブレット | 600px > < 960px |
| Medium | md | 大型タブレットからノートパソコン | 960px > < 1264px* |
| Large | lg | デスクトップ | 1264px > < 1904px* |
| Extra large | xl | 4k、ウルトラワイド | > 1904px* |
| デスクトップにおけるブラウザスクロールバーの * -16px | |||
| 仕様 | |||
ヘルパークラスは特定のブレークポイントに margin または padding を適用します。 これらのクラスは次の形式で適用できます: {property}{direction}-{breakpoint}-{size}. これは、推測される xs には適用されません。 例えば ma-xs-2 は ma-2 と同じです。
# Horizontal
marginヘルパークラスを使えば、コンテンツを簡単に水平方向にセンタリングすることができます。
# ネガティブ・マージン
マージンは、ネガティブ側にも同様に 1 から 16 の間隔で適用できます。