SE学院
Contact

Paddingの使い方

Cheat sheet

各項目を選ぶことで、任意のパディングを作成できます。

方向
サイズ

HTML

<div class="">
Padding
</div>

サンプル

Padding

Class

Primer CSSには、パディング(要素の内側の余白)を指定するためのクラスが用意されています。

Class CSS properties
p-0 padding: 0;
p-1 padding: 4px;
p-2 padding: 8px;
p-3 padding: 16px;
p-4 padding: 24px;
p-5 padding: 32px;
p-6 padding: 40px;
pt-0 padding-top: 0;
pt-1 padding-top: 4px;
pt-2 padding-top: 8px;
pt-3 padding-top: 16px;
pt-4 padding-top: 24px;
pt-5 padding-top: 32px;
pt-6 padding-top: 40px;
pr-0 padding-right: 0;
pr-1 padding-right: 4px;
pr-2 padding-right: 8px;
pr-3 padding-right: 16px;
pr-4 padding-right: 24px;
pr-5 padding-right: 32px;
pr-6 padding-right: 40px;
pb-0 padding-bottom: 0;
pb-1 padding-bottom: 4px;
pb-2 padding-bottom: 8px;
pb-3 padding-bottom: 16px;
pb-4 padding-bottom: 24px;
pb-5 padding-bottom: 32px;
pb-6 padding-bottom: 40px;
pl-0 padding-left: 0;
pl-1 padding-left: 4px;
pl-2 padding-left: 8px;
pl-3 padding-left: 16px;
pl-4 padding-left: 24px;
pl-5 padding-left: 32px;
pl-6 padding-left: 40px;
px-0 padding-right: 0;
padding-left: 0;
px-1 padding-right: 4px;
padding-left: 4px;
px-2 padding-right: 8px;
padding-left: 8px;
px-3 padding-right: 16px;
padding-left: 16px;
px-4 padding-right: 24px;
padding-left: 24px;
px-5 padding-right: 32px;
padding-left: 32px;
px-6 padding-right: 40px;
padding-left: 40px;
py-0 padding-top: 0;
padding-bottom: 0;
py-1 padding-top: 4px;
padding-bottom: 4px;
py-2 padding-top: 8px;
padding-bottom: 8px;
py-3 padding-top: 16px;
padding-bottom: 16px;
py-4 padding-top: 24px;
padding-bottom: 24px;
py-5 padding-right: 32px;
padding-bottom: 32px;
py-6 padding-right: 40px;
padding-bottom: 40px;