【Bootstrap】余白の作り方（margin、padding）

はじめに

今回は、Bootstrapを用いて余白を作る方法について見ていきましょう。

Bootstrapを用いた余白の作り方

marginはボックスの外側に作る余白、paddingはボックスの内側に作る余白であることはご存知かと思いますが、Bootstrapでは以下のように記述することで、余白を作ることができます。

例

①marginを上下左右に指定する場合（数字部分は0~5の整数が入ります）

m-1

②paddingを上下に指定する場合

py-2

略称の説明

1文字目

「m」はmargin、「p」はpadding

部分指定する場合、2文字目

上はtopの「t」

下はbottomの「b」

右はrightの「r」

左はleftの「f」

上下はy軸の「y」

左右はx軸の「x」

サンプルコード

html

<div class="mb-3">
    <p class="p-1">余白の作り方</p>
</div>

おわりに

たまに、上下って何だったっけって思っちゃいます。