マージンとパディング（Margin and padding）
可変性に優れた
margin
や
padding
値を、要素かその周辺のサブセットに簡略なクラスで割り当てる。個々のプロパティ、すべてのプロパティ、垂直方向と水平方向のプロパティのサポートが組み込まれている。クラスは、
0.25rem
から
3rem
までのデフォルトのSassマップから構築。
CSS Gridレイアウトモジュールを使用したいなら、
ギャップユーティリティ
を使用する。
記法について（Notation）
v5.0.0-beta1一部設定変更
xs
から
xl
までの全てのブレークポイントに適用される空白ユーティリティには、ブレークポイントの省略形がない。これは、これらのクラスが
min-width: 0
以上から適用され、メディアクエリにバインドされていないため。ただし、残りのブレークポイントにはブレークポイントの省略形が含まれる。
クラス名は、
xs
（すべてのビューポイント）の場合は、
.
{property}
{sides}
-
{size}
の形式で指定し、
sm
,
md
,
lg
,
xl
,
xxl
の場合は、
{property}
{sides}
-
{breakpoint}
-
{size}
の形式で指定。
property
（空白の設定）：
m
-
margin
を設定するクラス
p
-
padding
を設定するクラス
sides
（空白の方向）：
t
（上：top） -
margin-top
や
padding-top
を設定するクラス
b
（下：bottom） -
margin-bottom
や
padding-bottom
を設定するクラス
s
（行頭：start）
v5.0.0-beta1設定変更
- LTR（左書き）で
margin-left
や
padding-left
を設定し、RTL（右書き）で
margin-right
や
padding-right
を設定するクラス
e
（行末：end）
v5.0.0-beta1設定変更
- LTR（左書き）で
margin-right
や
padding-right
を設定し、RTL（右書き）で
margin-left
や
padding-left
を設定するクラス
x
（左右） -
*-left
と
*-right
の両方を設定するクラス
y
（上下） -
*-top
と
*-bottom
の両方を設定するクラス
「なし」（上下左右） - 要素の4方向すべてに
margin
や
padding
を設定するクラス
size
（空白のサイズ）：
0
-
margin
や
padding
を
0
に設定するクラス
1
-
margin
や
padding
を
$spacer * .25
（デフォルト）に設定するクラス
2
-
margin
や
padding
を
$spacer * .5
（デフォルト）に設定するクラス
3
-
margin
や
padding
を
$spacer
（デフォルト）に設定するクラス
4
-
margin
や
padding
を
$spacer * 1.5
（デフォルト）に設定するクラス
5
-
margin
や
padding
を
$spacer * 3
（デフォルト）に設定するクラス
auto
-
margin
を
auto
に設定するクラス
（$spacerの基準値は1rem=16px。
$spacers
Sassマップ変数にエントリーを追加すれば、さらにサイズの追加ができる）
【変更履歴】
【v5.0.0-beta1】
RTL（右書き）の設定追加に伴い
sides
（空白の方向）のクラス名変更
l
（左：left） ⇒
s
（行頭：start）
r
（右：right） ⇒
e
（行末：end）
ビューポートサイズ大以上で行頭側のマージンを1remにする：
.ms-lg-3
ココに表示されます。
ビューポートサイズ特大以上で行頭側のマージンを1remにする：
.ms-xl-3
ココに表示されます。
ビューポートサイズ特大以上で行頭側のマージンを1remにする：
.ms-xxl-3
ココに表示されます。
全てのビューポートサイズでマージンを設定
特定ビューポートサイズでマージンを設定
定義済クラスの種類
要素に
.m
{sides}
(-
{breakpoint}
)-
{size}
（上記の「定義済クラスの種類」から選択）を入れる
{breakpoint}
（
sm
（小）,
md
（中）,
lg
（大）,
xl
（特大）,
xxl
（超特大）のいずれかを選択）は、
グリッド・システム
のビューポイントに準ずる
{size}
（空白のサイズ）は、0～5の整数とautoから選択
【変更履歴】
【v5.0.0-alpha1】
.m
{sides}
-xxl-
{size}
が追加
【v5.0.0-beta1】
RTL（右書き）の設定追加に伴いクラス名変更
行頭側のマージン：
.ml(-
{breakpoint}
)-
{size}
⇒
.ms(-
{breakpoint}
)-
{size}
行末側のマージン：
.mr(-
{breakpoint}
)-
{size}
⇒
.me(-
{breakpoint}
)-
{size}
ビューポートサイズ小以上で行頭側のパディングを1remにする：
.ps-sm-3
ココに表示されます。
ビューポートサイズ中以上で行頭側のパディングを1remにする：
.ps-md-3
ココに表示されます。
ビューポートサイズ大以上で行頭側のパディングを1remにする：
.ps-lg-3
ココに表示されます。
ビューポートサイズ特大以上で行頭側のパディングを1remにする：
.ps-xl-3
ココに表示されます。
全てのビューポートサイズでパディングを設定
特定ビューポートサイズでパディングを設定
定義済クラスの種類
要素に
.p
{sides}
(-
{breakpoint}
)-
{size}
（上記の「定義済クラスの種類」から選択）を入れる
{breakpoint}
（
sm
（小）,
md
（中）,
lg
（大）,
xl
（特大）,
xxl
（超特大）のいずれかを選択）は、
グリッド・システム
のビューポイントに準ずる
{size}
（空白のサイズ）は、0～5の整数から選択
【変更履歴】
【v5.0.0-alpha1】
.p
{sides}
-xxl-
{size}
が追加
【v5.0.0-beta1】
RTL（右書き）の設定追加に伴いクラス名変更
行頭側のパディング：
.pl(-
{breakpoint}
)-
{size}
⇒
.ps(-
{breakpoint}
)-
{size}
行末側のパディング：
.pr(-
{breakpoint}
)-
{size}
⇒
.pe(-
{breakpoint}
)-
{size}
要素の中央揃え（Horizontal centering）
さらに、Bootstrapには、固定幅のブロックレベルのコンテンツを水平にセンタリングするための
.mx-auto
クラス（つまり、
display: block
と横方向の空白を
auto
に設定した幅のコンテンツ）組み込まれている。
見本
見やすいよう領域に色と枠を付けています
中央揃えの要素
