Studioではマージン、パディング、ギャップを使い、余白を設定してボックスの配置を調整します。

マージンとパディングは、選択したボックス自体に余白の値を設定します。ギャップはボックス間の余白で、それらの親となるボックスを選択することで設定できます。

余白のサイズは、エディタ上でそれぞれの色のバーをドラッグするか、画面上部のスタイルメニューから直接数値を入力して変更します。

マージン・パディングは、四辺それぞれの余白サイズを設定できますが、その中央にある錠アイコンをクリックすると、左右、上下または四辺全ての数値を共通化できます。ギャップの場合は、横と縦の数値が共通化されます。

マージンは、ボックスの外側の余白です。

ボックスを選択し青い選択枠線の少し外側にカーソルを合わせると、オレンジ色の矢印が表示されます。矢印を上下左右に引き伸ばしてマージンを追加します。

また、マージンにはマイナスの数値も設定できます。これは「ネガティブマージン」とも呼ばれ、レイアウトに役立つこともあります。

ネガティブマージン

パディングは、ボックスの内側の余白です。

ボックスをクリックして青い選択枠の少し内側にカーソルを合わせると、パディングを設定する緑色の矢印が表示されます。矢印を上下左右に引き伸ばして調整します。

ギャップは、ボックス間の余白を意味します。ギャップを使えば、複数のボックス間の余白を均等に一括設定できます。

ギャップを使うには、一括設定したい複数のボックスをグループ化する必要があります。

グループ化した親ボックスを選択すると、子ボックス間にピンク色の線が表示されます。そこにカーソルを合わせて表示される矢印を上下左右に動かして、ギャップを設定します。

なお、ギャップはボックス間に余白を追加するため、隣接するボックスがない箇所には余白が追加されません。

margin padding gap