Margin

マージンを付与するユーティリティ CSS。

Table of Contents

• Basic
• Compatible
• Variables
• Import

Basic

• .is-margin-{way}-{size} で各方向に margin を付与します
• .is-margin-{size} は全方向（※.is-m-{size} に短縮可能）
• .is-margin-top-{size} は上方向（※.is-mt-{size} に短縮可能）
• .is-margin-right-{size} は右方向（※.is-mr-{size} に短縮可能）
• .is-margin-bottom-{size} は下方向（※.is-mb-{size} に短縮可能）
• .is-margin-left-{size} は左方向（※.is-ml-{size} に短縮可能）
• .is-margin-vertical-{size} は上下方向（※.is-my-{size} に短縮可能）
• .is-margin-horizontal-{size} は上下方向（※.is-mx-{size} に短縮可能）
• {size} は最大 xxl から最小 xxs に加え none auto を指定できます

<div>マージンテスト</div>
<div class="box is-mt-md">マージンテスト</div>
<div>マージンテスト</div>

Compatible

推奨のクラス名と同様の効果を互換のあるクラス名で得ることもできます。

Variables

上書きできる変数は以下の通りです。

/* None */

Import

PostCSS で読み込む場合の各パスは以下となります。

@import "musubii/src/utilities/margin/main.css";