Bulmaのスペーシングヘルパー Spacing helpers [CSSフレームワーク]

Bulmaでは、すべての方向にマージンとパディングのヘルパークラスが提供されています。

今回は、スペースを簡単に設定できるBulmaのスペーシングヘルパーのクラスを紹介します。

要素のマージンとパディングを設定するスペーシングヘルパークラス

Bulmaのスペーシングヘルパークラスでは、マージン（margin）とパディング（padding）を設定することができます。

ヘルパークラスでは、それぞれ以下のルールが適用されます。

クラス名の先頭が「m」で始まるものはマージンの設定を表し、「p」で始まるものはパディングの設定を表します。

例えば「m-2」であればマージン、「p-3」であればパディングを指定するクラスになります。

Bulmaではスペースを設ける位置として

の7つの指定が可能になっています。

ヘルパークラスでは、それぞれ以下のルールが適用されます。

*の部分には、マージンまたはパディング表すmまたはpが入ります。
※ 上下左右の「なし」は指定がない（空文字列）という意味です。

方向を表す文字は、方向を表す文字列の頭文字、または軸の方向を表す文字になります。

例えば「mt-4」であればマージントップ（margin-top）、「pl-2」であればパディングレフト（padding-left）を指定するクラスになります。

Bulmaのスペーシングヘルパーでは、余白の設定方法と方向を組み合わせたプレフィックスがクラスの文字列に採用されています。

スペース（マージンまたはパディング）と方向（上下左右）を含んだCSSクラス（文字列）のプレフィックスは以下のようになります。

余白のサイズには7種類が用意されています。サイズは0 ～ 6の数字で指定します。
0 ～ 6を指定する場合の余白のサイズは、以下の通りになります。

余白のサイズは余白の設定方法と方向を表すプレフィックスの後にハイフン（-）でつなげて記述します。

例えば「mb-3」であれば、下マージンが0.75rem（margin-bottom: 0.75rem;）を表します。
「p-2」であれば、上下左右のパディングが0.5rem（padding: 0.5rem;）を表します。

以下にBulmaに用意されているスペーシングヘルパークラスの使用例をいくつか記載します。

指定可能なクラスの一覧を以下にまとめておきます。