Studioでは、マージン・パディング・ギャップの3つの方法でボックス間の余白を設定します。余白の種類を使い分けることで、ボックス同士の距離や内側の余白を細かく調整できます。
注意：余白で使用可能な単位はpxのみです。％やvwなど、他の単位は指定できません。
Studioで設定できる余白の種類
1. マージン
マージンは、選択中のボックスの外側にできる余白です。 ボックス同士の距離の調整や、ネガティブマージンによる重なりの表現に利用できます。
2. パディング
パディングは、選択中のボックスの内側にできる余白です。 ボックス内のテキストや画像と、ボックスの枠との距離を整えるときに使います。
3. ギャップ
ギャップは、グループ化されたボックス同士の間にできる余白です。 複数の子ボックスの間隔を均等に一括で調整したいときに使います。
ギャップは親ボックス（グループ化されたボックス）を選択して設定します。 ボックス同士の間にだけ余白を追加するため、隣接するボックスがない箇所には余白は追加されません。
ボックスに余白を設定する
スクリーン上で設定する
スクリーン上で、ボックス周りのガイドをドラッグして余白を設定できます。
余白を設定したいボックスを選択します。
設定したい余白の種類に合わせ、以下の箇所にカーソルを合わせます。
マージン：ボックスを囲む青い枠線の外側（オレンジ色）
パディング：ボックスを囲む青い枠線の内側（黄緑色）
ギャップ：ボックスとボックスの間（ピンク色）
矢印が表示されたら、矢印を上下左右にドラッグして余白を調整します。
右パネルの設定タブで設定する
右パネルから、数値で余白を指定することもできます。
余白を設定したいボックスを選択します。
右パネルで[ボックス]タブを選択します。
パネルが閉じている場合には、右パネルを開いてください。
各余白の調整フィールドに数値を入力します。
余白を一括設定する
マージン・パディングの数値入力フィールド横のアイコンで、数値の一括指定を設定できます。アイコンをクリックして数値フィールドを切り替えると、次のように値を共通化できます。
四辺それぞれに個別の数値を入力する：上下左右それぞれの設定フィールドが表示されます。
上下 / 左右に同一の数値を入力する：上下と左右の二つの設定フィールドが表示されます。
四辺すべてに同一の数値を入力する：四辺すべてに反映される一つの設定フィールドが表示されます。
margin padding gap