余白の取り方

マージン（Margin）やパディング（Padding）などの余白のパターンをシーン別にまとめています。

基本的な考え方

余白は、要素間の距離に差をつけてかたまり（チャンク）を形成することで、要素同士の並列・内包などの関係性を視覚的に表現するために使います。

余白の値は、原則として8の倍数を使用し、画面の外側から内側にいくにつれて小さい値を段階的に使います。

種類

以下の余白を定義します。

• パディング（Padding）
• マージン（Margin）

パディング（Padding）

原則として24pxとします。縦長・横長になった場合や、中の要素がつまって狭くなってしまうときは、16pxとします。

コンテンツエリア（Base）の余白

コンテンツエリア内のグループ（BaseColumn）の余白

基本的に、セクション（主にセクションタイトルで括られるエリア）内でFormControlやFieldsetなどを複数配置するようなパターンで適用し、中の要素がつまったり狭くなることが想定されるため、16pxとします。

ダイアログの余白

見出しとボタンエリアは横長になるため、天地左右16pxのほうがすわりがよいですが、本文エリアの読み開始位置と一致させるため、左右を24pxとし、天地に16pxとします。

マージン（Margin）

セクションやブロックの見出しレベルや階層を下げるにつれて、32px、24px、16pxの順で段階的に使います。 ただし、段階的に使用した結果、間隔がつまったり開きすぎてしまうなど視覚的なグルーピングが不適切と判断される場合は、段階を超えて適切な大きさを使います。

具体的な配置の基準は次の通りです。

• 原則、要素に対して上方向に適用する。
• 同じ意味階層となる要素同士は、ぞれぞれ同じ大きさのマージンを適用する。

セクション同士の間

32pxとします。

画面タイトルエリアとセクションの間

24pxとします。

見出しと本文（またはBase）の間

16pxとします。

セクション内の要素同士の間

見出しレベルやコンテンツの階層を下げるにつれて、32px、24px、16pxの順で段階的に適用します。

アイコンやラベルなどの小さい要素間

アイコンやラベルといった小さい要素を組み合わせる場合は、基本的に8pxとします。

• InfomationPanelやFormControl、Fieldsetなどのように、ブロックの見出しやInputにアイコンやラベルを複合的に組み合わせる場合は、16pxと8pxを段階的に組み合わせて適用します。
• インラインテキスト内でテキストリンクにアイコンを付加する場合は、4pxとします。

ダイアログの本文エリア内の要素間

見出しレベルやコンテンツの階層を下げるにつれて、32px、24px、16pxの順で段階的に適用します。