v7.1.0

Space

Table of Contents

Detail

共通モディファイアで直下要素に余白を与えるユーティリティ CSS。

Basic

.is-space .is-space-(value) を使った場合は、直下にある最初の要素以外に margin-top が付与されます。文章のラッパーに使うと便利です。(value) を省略した場合は、md と同等の値になります。

(value) は Meter の値を引き継いでいます。

Space

山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。

山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。

山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。

山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。

<div class="box is-space-md">
  <p class="text">山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。</p>
  <p class="text">山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。</p>
  <p class="text">山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。</p>
  <p class="text">山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。</p>
</div>
XXSXSSmallMediumLargeXLXXL
.is-space-xxs.is-space-xs.is-space-sm.is-space, .is-space-md.is-space-lg.is-space-xl.is-space-xxl

Way

.is-space-(way) .is-space-(way)-(value) を使った場合は、直下にある要素に指定した方向の margin-(way) が付与されます。Flexbox 子要素などの配置で役立ちます。

(value) を省略した場合は、md と同等の値になります。

Way
Fix
Space
<div class="box is-flex is-space-top-md">
  <button class="button is-plain is-primary is-full" type="button">ボタンA</button>
  <button class="button is-outline is-danger is-full" type="button">ボタンB</button>
</div>
XXSXSSmallMediumLargeXLXXL
.is-space-top-xxs.is-space-top-xs.is-space-top-sm.is-space-top, .is-space-top-md.is-space-top-lg.is-space-top-xl.is-space-top-xxl
.is-space-right-xxs.is-space-right-xs.is-space-right-sm.is-space-right, .is-space-right-md.is-space-right-lg.is-space-right-xl.is-space-right-xxl
.is-space-bottom-xxs.is-space-bottom-xs.is-space-bottom-sm.is-space-bottom, .is-space-bottom-md.is-space-bottom-lg.is-space-bottom-xl.is-space-bottom-xxl
.is-space-left-xxs.is-space-left-xs.is-space-left-sm.is-space-left, .is-space-left-md.is-space-left-lg.is-space-left-xl.is-space-left-xxl
Warning

各方向の Space は順番による除外が無いため、通常の Space と異なりすべての要素に margin-(way) が付与されます。レイアウトに余分なスペースが発生する場合は、Margin の Margin Minus（ネガティブマージン）を併用してください。

Important

Option の $option-important-space を true にすると、全プロパティに !important を付与できます。

Variables

Name
Default Value
Compiled Value
  • Name
    $modifier-space
    Default Value
    .is-space
    Compiled Value
    .is-space
  • Name
    $modifier-space-xxl
    Default Value
    .is-space-xxl
    Compiled Value
    .is-space-xxl
  • Name
    $modifier-space-xl
    Default Value
    .is-space-xl
    Compiled Value
    .is-space-xl
  • Name
    $modifier-space-lg
    Default Value
    .is-space-lg
    Compiled Value
    .is-space-lg
  • Name
    $modifier-space-md
    Default Value
    .is-space-md
    Compiled Value
    .is-space-md
  • Name
    $modifier-space-sm
    Default Value
    .is-space-sm
    Compiled Value
    .is-space-sm
  • Name
    $modifier-space-xs
    Default Value
    .is-space-xs
    Compiled Value
    .is-space-xs
  • Name
    $modifier-space-xxs
    Default Value
    .is-space-xxs
    Compiled Value
    .is-space-xxs
  • Name
    $modifier-space-top
    Default Value
    .is-space-top
    Compiled Value
    .is-space-top
  • Name
    $modifier-space-top-xxl
    Default Value
    .is-space-top-xxl
    Compiled Value
    .is-space-top-xxl
  • Name
    $modifier-space-top-xl
    Default Value
    .is-space-top-xl
    Compiled Value
    .is-space-top-xl
  • Name
    $modifier-space-top-lg
    Default Value
    .is-space-top-lg
    Compiled Value
    .is-space-top-lg
  • Name
    $modifier-space-top-md
    Default Value
    .is-space-top-md
    Compiled Value
    .is-space-top-md
  • Name
    $modifier-space-top-sm
    Default Value
    .is-space-top-sm
    Compiled Value
    .is-space-top-sm
  • Name
    $modifier-space-top-xs
    Default Value
    .is-space-top-xs
    Compiled Value
    .is-space-top-xs
  • Name
    $modifier-space-top-xxs
    Default Value
    .is-space-top-xxs
    Compiled Value
    .is-space-top-xxs
  • Name
    $modifier-space-right
    Default Value
    .is-space-right
    Compiled Value
    .is-space-right
  • Name
    $modifier-space-right-xxl
    Default Value
    .is-space-right-xxl
    Compiled Value
    .is-space-right-xxl
  • Name
    $modifier-space-right-xl
    Default Value
    .is-space-right-xl
    Compiled Value
    .is-space-right-xl
  • Name
    $modifier-space-right-lg
    Default Value
    .is-space-right-lg
    Compiled Value
    .is-space-right-lg
  • Name
    $modifier-space-right-md
    Default Value
    .is-space-right-md
    Compiled Value
    .is-space-right-md
  • Name
    $modifier-space-right-sm
    Default Value
    .is-space-right-sm
    Compiled Value
    .is-space-right-sm
  • Name
    $modifier-space-right-xs
    Default Value
    .is-space-right-xs
    Compiled Value
    .is-space-right-xs
  • Name
    $modifier-space-right-xxs
    Default Value
    .is-space-right-xxs
    Compiled Value
    .is-space-right-xxs
  • Name
    $modifier-space-bottom
    Default Value
    .is-space-bottom
    Compiled Value
    .is-space-bottom
  • Name
    $modifier-space-bottom-xxl
    Default Value
    .is-space-bottom-xxl
    Compiled Value
    .is-space-bottom-xxl
  • Name
    $modifier-space-bottom-xl
    Default Value
    .is-space-bottom-xl
    Compiled Value
    .is-space-bottom-xl
  • Name
    $modifier-space-bottom-lg
    Default Value
    .is-space-bottom-lg
    Compiled Value
    .is-space-bottom-lg
  • Name
    $modifier-space-bottom-md
    Default Value
    .is-space-bottom-md
    Compiled Value
    .is-space-bottom-md
  • Name
    $modifier-space-bottom-sm
    Default Value
    .is-space-bottom-sm
    Compiled Value
    .is-space-bottom-sm
  • Name
    $modifier-space-bottom-xs
    Default Value
    .is-space-bottom-xs
    Compiled Value
    .is-space-bottom-xs
  • Name
    $modifier-space-bottom-xxs
    Default Value
    .is-space-bottom-xxs
    Compiled Value
    .is-space-bottom-xxs
  • Name
    $modifier-space-left
    Default Value
    .is-space-left
    Compiled Value
    .is-space-left
  • Name
    $modifier-space-left-xxl
    Default Value
    .is-space-left-xxl
    Compiled Value
    .is-space-left-xxl
  • Name
    $modifier-space-left-xl
    Default Value
    .is-space-left-xl
    Compiled Value
    .is-space-left-xl
  • Name
    $modifier-space-left-lg
    Default Value
    .is-space-left-lg
    Compiled Value
    .is-space-left-lg
  • Name
    $modifier-space-left-md
    Default Value
    .is-space-left-md
    Compiled Value
    .is-space-left-md
  • Name
    $modifier-space-left-sm
    Default Value
    .is-space-left-sm
    Compiled Value
    .is-space-left-sm
  • Name
    $modifier-space-left-xs
    Default Value
    .is-space-left-xs
    Compiled Value
    .is-space-left-xs
  • Name
    $modifier-space-left-xxs
    Default Value
    .is-space-left-xxs
    Compiled Value
    .is-space-left-xxs
  • Name
    $space-size-xxl
    Default Value
    $meter-xxl
    Compiled Value
    28px
  • Name
    $space-size-xl
    Default Value
    $meter-xl
    Compiled Value
    24px
  • Name
    $space-size-lg
    Default Value
    $meter-lg
    Compiled Value
    20px
  • Name
    $space-size-md
    Default Value
    $meter-md
    Compiled Value
    16px
  • Name
    $space-size-sm
    Default Value
    $meter-sm
    Compiled Value
    12px
  • Name
    $space-size-xs
    Default Value
    $meter-xs
    Compiled Value
    8px
  • Name
    $space-size-xxs
    Default Value
    $meter-xxs
    Compiled Value
    4px
  • Name
    $space-important
    Default Value
    if( $option-important-space == true, !important, null )

Mixins

  • musubii-style-space($space-size)
  • musubii-style-space-top($space-size)
  • musubii-style-space-right($space-size)
  • musubii-style-space-bottom($space-size)
  • musubii-style-space-left($space-size)

Sources