Space

直下要素の間にマージンを付与するユーティリティ CSS。

Table of Contents

• Basic
• Way
• Variables
• Import

Basic

• .is-space-{size} で直下の最初の要素以外に margin-top を付与します
• {size} は最大 xxl から最小 xxs まで

<div class="box is-space-md">
  <div>スペーステスト</div>
  <div>スペーステスト</div>
  <div>スペーステスト</div>
</div>

Way

• .is-space-{way}-{size} で直下のすべての要素に margin-{way} を付与します
• {way} は top right bottom left の 4 種類
• {size} は最大 xxl から最小 xxs まで

<div class="box is-flex is-space-right-md">
  <div>スペーステスト</div>
  <div>スペーステスト</div>
  <div>スペーステスト</div>
</div>

Variables

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

/* None */

Import

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

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