余白
基準
余白は $margin-base の N px を基準として設計します。
設定値
| 変数 | 値 | 属性 | 内容 |
|---|---|---|---|
| $margin-xl | 4N px | 余白 | 骨格の余白など、最大値 |
| $margin-lg | 2N px | 余白 | セクション（SECTION）の下部余白などに使用します。 |
| $margin-base | N px | 余白 | 段落（P）の基本的な下部余白です。 |
| $margin-sm | 1/2N px | 余白 | グループのマージン（フォームの項目毎）、一覧の余白、見出し下部余白で使用します。 |
| $margin-xs | 1/4N px | 余白 | グループ（小）のマージン（ラジオボタンとテキストなど）、一覧の余白、見出し下部余白で使用します。 |
枠組み要素サンプル
基本となる枠組み要素の下部余白例です。
- $margin-lg
一番外枠の <SECTION> の下部余白及び、その他、<MAIN> に上下余白が必要であれば採用します。
- $margin-base
ベースとなる余白です。PやTABLE、LISTなどの下部余白に該当します。
グループ要素サンプル
基本となる枠組み要素の下部余白例です。
- margin-sm
グループのマージン（フォームの項目毎）、一覧の余白、見出し下部余白で使用します。
- margin-xs
グループ（小）のマージン（ラジオボタンとテキストなど）、一覧の余白、見出し下部余白、テキストボックスやテーブルのセルで使用します。