Margin

Detail
Basic
Way
Important
Variables
Mixins
Sources

Detail

共通モディファイアで余白（Margin）を与えるユーティリティ CSS。

Basic

.is-margin-(value) では上下左右に Margin を付与します。(value) を省略した場合は md と同等値の Margin を付与。(value) は Meter の値を引き継いでいます。

XXS	XS	Small	Medium	Large	XL	XXL
`.is-margin-xxs`	`.is-margin-xs`	`.is-margin-sm`	`.is-margin, .is-margin-md`	`.is-margin-lg`	`.is-margin-xl`	`.is-margin-xxl`

.is-margin-minus-(value) では上下左右にネガティブマージンを付与します。

XXS	XS	Small	Medium	Large	XL	XXL
`.is-margin-minus-xxs`	`.is-margin-minus-xs`	`.is-margin-minus-sm`	`.is-margin-minus, .is-margin-minus-md`	`.is-margin-minus-lg`	`.is-margin-minus-xl`	`.is-margin-minus-xxl`

Way

.is-margin-(way)-(value) では 1 方向のみに Margin を付与します。

XXS	XS	Small	Medium	Large	XL	XXL
`.is-margin-top-xxs`	`.is-margin-top-xs`	`.is-margin-top-sm`	`.is-margin-top, .is-margin-top-md`	`.is-margin-top-lg`	`.is-margin-top-xl`	`.is-margin-top-xxl`
`.is-margin-right-xxs`	`.is-margin-right-xs`	`.is-margin-right-sm`	`.is-margin-right, .is-margin-right-md`	`.is-margin-right-lg`	`.is-margin-right-xl`	`.is-margin-right-xxl`
`.is-margin-bottom-xxs`	`.is-margin-bottom-xs`	`.is-margin-bottom-sm`	`.is-margin-bottom, .is-margin-bottom-md`	`.is-margin-bottom-lg`	`.is-margin-bottom-xl`	`.is-margin-bottom-xxl`
`.is-margin-left-xxs`	`.is-margin-left-xs`	`.is-margin-left-sm`	`.is-margin-left, .is-margin-left-md`	`.is-margin-left-lg`	`.is-margin-left-xl`	`.is-margin-left-xxl`

.is-margin-(way)-minus-(value) では 1 方向にネガティブマージンを付与します。

XXS	XS	Small	Medium	Large	XL	XXL
`.is-margin-top-minus-xxs`	`.is-margin-top-minus-xs`	`.is-margin-top-minus-sm`	`.is-margin-top-minus, .is-margin-top-minus-md`	`.is-margin-top-minus-lg`	`.is-margin-top-minus-xl`	`.is-margin-top-minus-xxl`
`.is-margin-right-minus-xxs`	`.is-margin-right-minus-xs`	`.is-margin-right-minus-sm`	`.is-margin-right-minus, .is-margin-right-minus-md`	`.is-margin-right-minus-lg`	`.is-margin-right-minus-xl`	`.is-margin-right-minus-xxl`
`.is-margin-bottom-minus-xxs`	`.is-margin-bottom-minus-xs`	`.is-margin-bottom-minus-sm`	`.is-margin-bottom-minus, .is-margin-bottom-minus-md`	`.is-margin-bottom-minus-lg`	`.is-margin-bottom-minus-xl`	`.is-margin-bottom-minus-xxl`
`.is-margin-left-minus-xxs`	`.is-margin-left-minus-xs`	`.is-margin-left-minus-sm`	`.is-margin-left-minus, .is-margin-left-minus-md`	`.is-margin-left-minus-lg`	`.is-margin-left-minus-xl`	`.is-margin-left-minus-xxl`

Vertical

.is-margin-vertical-(value) では上下方向同時に Margin を付与します。

XXS	XS	Small	Medium	Large	XL	XXL
`.is-margin-vertical-xxs`	`.is-margin-vertical-xs`	`.is-margin-vertical-sm`	`is-margin-vertical, .is-margin-vertical-md`	`.is-margin-vertical-lg`	`.is-margin-vertical-xl`	`.is-margin-vertical-xxl`

.is-margin-vertical-minus-(value) では上下方向同時にネガティブマージンを付与します。

XXS	XS	Small	Medium	Large	XL	XXL
`.is-margin-vertical-minus-xxs`	`.is-margin-vertical-minus-xs`	`.is-margin-vertical-minus-sm`	`is-margin-vertical-minus, .is-margin-vertical-minus-md`	`.is-margin-vertical-minus-lg`	`.is-margin-vertical-minus-xl`	`.is-margin-vertical-minus-xxl`

Horizontal

.is-margin-horizontal-(value) では左右方向同時に Margin を付与します。

XXS	XS	Small	Medium	Large	XL	XXL
`.is-margin-horizontal-xxs`	`.is-margin-horizontal-xs`	`.is-margin-horizontal-sm`	`is-margin-horizontal, .is-margin-horizontal-md`	`.is-margin-horizontal-lg`	`.is-margin-horizontal-xl`	`.is-margin-horizontal-xxl`

.is-margin-horizontal-minus-(value) では左右方向同時にネガティブマージンを付与します。

XXS	XS	Small	Medium	Large	XL	XXL
`.is-margin-horizontal-minus-xxs`	`.is-margin-horizontal-minus-xs`	`.is-margin-horizontal-minus-sm`	`is-margin-horizontal-minus, .is-margin-horizontal-minus-md`	`.is-margin-horizontal-minus-lg`	`.is-margin-horizontal-minus-xl`	`.is-margin-horizontal-minus-xxl`

Important

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

Variables

Name

Default Value

Compiled Value

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

Mixins

musubii-style-margin($margin-size)
musubii-style-margin-top($margin-size)
musubii-style-margin-right($margin-size)
musubii-style-margin-bottom($margin-size)
musubii-style-margin-left($margin-size)
musubii-style-margin-vertical($margin-size)
musubii-style-margin-horizontal($margin-size)
musubii-style-margin-minus($margin-size)
musubii-style-margin-top-minus($margin-size)
musubii-style-margin-right-minus($margin-size)
musubii-style-margin-bottom-minus($margin-size)
musubii-style-margin-left-minus($margin-size)
musubii-style-margin-vertical-minus($margin-size)
musubii-style-margin-horizontal-minus($margin-size)
musubii-style-margin-right-auto()
musubii-style-margin-left-auto()
musubii-style-margin-horizontal-auto()

Margin

#Table of Contents

#Detail

#Basic

#Way

#Vertical

#Horizontal

#Important

#Variables

#Mixins

#Sources

Table of Contents