エレメントの内側と外側の間隔.

色付きボックス内のテキストに余白を持たせることも、上の段落からボタンを離すこともできます。パディングはエレメントの縁の内側の空間、マージンは外側の空間です。どちらもStyleパネル上部のボックスモデルで設定します。テーマと新しいセクションは独自の間隔を持ちます。このページでは自分の設定との付き合い方を説明します。

動画ではボタンに24 pxの上マージンを付けています。

始める前に

• ページをDXPR Builderで開きます。エレメントにポイントするとMore付きのコントロールバーが表示されます。ビルダーが初めての場合は最初のページをご覧ください。
• Save（ダイアログ）では、変更はエディター内に保持されます。コンテンツ上部のビルダーツールバーにあるSaveでページを保存し、「Saved field」と表示されます。
• ボックスモデルを1ページ内の1か所の隙間の修正に使います。
• テーマやクラスを繰り返す間隔に使います。セクション間の隙間などが該当します。
• 尺度を揃えます。 すべての隙間が数種類のサイズから来ると、ページは落ち着いて見えます。

手順：ボタンまわりの余白

1. ページ上でButtonにカーソルを合わせ、More、Settingsの順にクリックします。
2. 次にStyleパネルを開き、ボックスモデルの外側リングであるMarginの上辺をクリックします。ロックは開いた状態から始まるため、この辺のみ変わります。
3. 単位ボタンがPXなのを確認します。値フィールドに24と入力してEnterキーを押します。その辺が24pxになり、ボタンが下がります。
4. ダイアログのSave、次にツールバーのSaveをクリックします。

Buttonではマージンがボタン自体に付くため、空間はその縁から始まります。

手順：背の高いセクション

新しいセクションにはVertical padding size 5 (py-5)クラスの上下パディングが付くため、ボックスモデルより優先されます。先にそのクラスを外します。ダイアログのタイトルがRowやColumnではなくSectionなのを確認します。

1. ページ上でSectionにカーソルを合わせ、More、Settingsの順にクリックします。
2. 開くのはGeneralパネルで、HTML classesを探し、Vertical padding size 5 (py-5)チップの×をクリックします。セクションの上下の空間が減ります。そのチップがなければ、この手順は飛ばします。
3. 次にStyleパネルを開きます。Paddingの上辺をクリックし、96と入力してEnterキーを押します。
4. 同様にPaddingの下辺も設定します。両辺が96pxになり、セクションが背高くなります。
5. ダイアログのSave、次にツールバーのSaveをクリックします。

表示内容

設定した各辺の値がボックスモデルに表示されます（例：24px）。ボタンは24 px下がり、セクションにはコンテンツ上下に96 pxの余白が付きます。

ボックスモデルの仕組み

+----------------- Margin ------------------+
||  +-------------- Border ---------------+  |
||  |  +----------- Padding ------------+ |  |
||  |  |                                | |  |
||  |  |         width × height         | |  |
||  |  |                                | |  |
||  |  +--------------------------------+ |  |
||  +-------------------------------------+  |
+-------------------------------------------+

• 各リングに4辺があります。辺には値（例：24px）が表示され、未設定では「-」です。
• 辺をクリックすると、スライダー、値フィールド、単位ボタンを持つ小さなピッカーが開きます。単位はPXか%です。Borderはpxのみです。
• 値を入力してEnterキーを押すか、スライダーをドラッグします。上下の矢印キーでは値が1ずつ変わります。Escapeでピッカーを閉じます。
• 辺の設定解除は、値フィールドを空にしてEnterキーを押します。その辺が「-」になり、テーマの設定に戻ります。

マージンは-200から200、パディングは0から200、境界線は0から50です。幅と高さは0から2000です。負のマージンではエレメントが隣に引き寄せられます。範囲外の入力値は最も近い上限値に切り詰められます。

ロック

各リングの名前横（Margin、Border、Padding）にロックがあります。ロックが閉じていると、1辺の設定値が4辺に反映されます。開いていると、各辺が独自の値を保持します。ロックを閉じても既存値は変わりません。次に設定する値のみコピーされます。

パーセント、サイズ、画面幅

パーセント値は、上下も含めエレメントの親の幅に対する割合です。そのため上パディング10%は、狭いカラムより広いカラムで高くなります。

ボックスモデルの中央は幅×高さです。ImageやMapのように自前でサイズを決めるエレメントは、この2つのボックスを無視します。

ボックスモデルに画面サイズ別の値はありません。スマートフォンより大画面でパディングを増やすには、代わりにBootstrapクラスを使います。例：py-3 py-lg-5では小さい画面で16 px、幅992 px以上で48 pxです。入力方法はHTML IDとクラスをご覧ください。

自分の値とテーマの間隔の付き合い方

• 新しいセクションにはパディングが付きます。 エディターで追加したセクションにはVertical padding size 5 (py-5)クラスが付きます。上下約48 px（3rem）です。このクラスは!important付きのため、上下のPaddingより優先されます。左右のパディングは有効です。
• 間隔クラスが優先されます。 HTML classesにあるBootstrap間隔クラス（例：Top margin size 3 (mt-3)）は、同じ辺の自分の値に勝ちます。
• カラムには隙間が残ります。 Bootstrapは各カラムの左右に12 pxのパディングを付けます。Columnの左右Paddingはそれを置き換えるため、コンテンツは隣のカラムと揃わなくなります。
• 段落は独自の間隔を保持します。 テーマは各段落と見出しの下に空間を置きます。ボックスモデルはエレメント全体に作用するため、その空間は変わりません。
• 隣のマージンは通常重なります。 あるエレメントが他の上に載るとき、上のエレメントの下マージンと下のエレメントの上マージンが隙間を共有します。大きい方が優先され、足し算にはなりません。

表示されない場合

• セクションの上下パディングが効かない。 Vertical padding size 5 (py-5)クラスが優先されています。HTML classesでそのチップを外します。
• マージンやパディングの値が効かない。 同じ辺のBootstrap間隔クラスが優先されています。そのチップを外すか、クラスのみ使います。
• パディングが見えない。 エレメントに背景も境界線もないため、空間が見えません。調整中はBackground色を付けます。
• 値が200に跳んだ。 パディングとマージンは200、境界線は50までです。小さい値かパーセントを使います。
• スマートフォンでページが詰まっている。 同じピクセル値が全画面に適用されます。小さい値、パーセント、レスポンシブクラスを使います。
• 2つの隙間が足し算にならない。 積み重なったマージンは重なり、大きい方が優先されます。隙間全体を2つのエレメントのいずれかに付けます。
• カラムが揃わなくなった。 Columnの側面Paddingがグリッドの隙間を置き換えています。その辺を再び空にします。

次のステップ

• タイポグラフィ：間隔を付けたボックス内のテキストのサイズと色を設定します。