SE学院
Contact

Marginの使い方

Cheat sheet

各項目を選ぶことで、任意のマージンを作成できます。

方向
サイズ

HTML

<div class="">
Margin
</div>

サンプル

Margin

Class

Primer CSSには、マージン(要素の外側の余白)を指定するためのクラスが用意されています。

Class CSS properties
m-0 margin: 0;
m-1 margin: 4px;
m-2 margin: 8px;
m-3 margin: 16px;
m-4 margin: 24px;
m-5 margin: 32px;
m-6 margin: 40px;
mt-0 margin-top: 0;
mt-1 margin-top: 4px;
mt-2 margin-top: 8px;
mt-3 margin-top: 16px;
mt-4 margin-top: 24px;
mt-5 margin-top: 32px;
mt-6 margin-top: 40px;
mr-0 margin-right: 0;
mr-1 margin-right: 4px;
mr-2 margin-right: 8px;
mr-3 margin-right: 16px;
mr-4 margin-right: 24px;
mr-5 margin-right: 32px;
mr-6 margin-right: 40px;
mb-0 margin-bottom: 0;
mb-1 margin-bottom: 4px;
mb-2 margin-bottom: 8px;
mb-3 margin-bottom: 16px;
mb-4 margin-bottom: 24px;
mb-5 margin-bottom: 32px;
mb-6 margin-bottom: 40px;
ml-0 margin-left: 0;
ml-1 margin-left: 4px;
ml-2 margin-left: 8px;
ml-3 margin-left: 16px;
ml-4 margin-left: 24px;
ml-5 margin-left: 32px;
ml-6 margin-left: 40px;
mx-0 margin-right: 0;
margin-left: 0;
mx-1 margin-right: 4px;
margin-left: 4px;
mx-2 margin-right: 8px;
margin-left: 8px;
mx-3 margin-right: 16px;
margin-left: 16px;
mx-4 margin-right: 24px;
margin-left: 24px;
mx-5 margin-right: 32px;
margin-left: 32px;
mx-6 margin-right: 40px;
margin-left: 40px;
my-0 margin-top: 0;
margin-bottom: 0;
my-1 margin-top: 4px;
margin-bottom: 4px;
my-2 margin-top: 8px;
margin-bottom: 8px;
my-3 margin-top: 16px;
margin-bottom: 16px;
my-4 margin-top: 24px;
margin-bottom: 24px;
my-5 margin-right: 32px;
margin-bottom: 32px;
my-6 margin-right: 40px;
margin-bottom: 40px;