対象プラン：全プラン
余白の調整方法
Studioでは下記機能を使って、ボックスとボックスの間に余白を設定することができます。これにより、ボックスの配置の微調整が可能になります。
マージン
パディング
ギャップ
注意：余白の設定単位はpx（ピクセル）となっており、％など他の単位は指定できません。
余白を設定する3つの方法
1. マージン
マージンは、選択したボックスの外側の余白を設定します。マージンにはマイナスの数値も設定できます。これはネガティブマージンとも呼ばれ、レイアウトに役立つこともあります。
設定方法
ボックスを選択します。
青い選択枠線の少し外側にカーソルを合わせると、オレンジ色の矢印が表示されます。矢印を上下左右に引き伸ばしてマージンを追加します。
もしくは、画面上部のスタイルメニューから直接数値を入力して変更します。
2. パディング
パディングは、選択したボックスの内側の余白を設定します。
設定方法
ボックスを選択します。
青い選択枠線の少し外側にカーソルを合わせると、緑色の矢印が表示されます。矢印を上下左右に引き伸ばしてマージンを追加します。
もしくは、画面上部のスタイルメニューから直接数値を入力して変更します。
3. ギャップ
ギャップは、グループ化されたボックスとボックスの間に設定する余白です。ギャップを使えば、複数のボックス間の余白を均等に一括設定できます。
なお、ギャップはボックス間に余白を追加するため、隣接するボックスがない箇所には余白が追加されません。
設定方法
グループ化した親ボックスを選択します。
子ボックス間にピンク色の線が表示されます。そこにカーソルを合わせて表示される矢印を上下左右に動かして、ギャップを設定します。
もしくは、画面上部のスタイルメニューから直接数値を入力して変更します。
Tips：余白の一括指定方法
スタイルバーの数値入力箇所で中央にある錠アイコンをクリックすると、左右・上下または四辺全ての数値を共通化できます。ギャップの場合は、横と縦の数値が共通化されます。
margin padding gap