Padding
An element's padding is the space between its content and its border.
|
p-{*}
|
Properties
|
|
|---|---|---|
p-0 |
padding: 0 |
0
|
p-2 |
padding: 0.125rem |
2px |
p-3 |
padding: 0.188rem |
3px |
p-4 |
padding: 0.25rem |
4px |
p-5 |
padding: 0.313rem |
5px |
p-6 |
padding: 0.375rem |
6px |
p-8 |
padding: 0.5rem |
8px |
p-10 |
padding: 0.625rem |
10px |
p-15 |
padding: 0.938rem |
15px |
p-20 |
padding: 1.25rem |
20px |
p-25 |
padding: 1.563rem |
25px |
p-30 |
padding: 1.875rem |
30px |
p-40 |
padding: 2.5rem |
40px |
p-50 |
padding: 3.125rem |
50px |
p-60 |
padding: 3.75rem |
60px |
p-70 |
padding: 4.375rem |
70px |
p-80 |
padding: 5rem |
80px |
p-100 |
padding: 6.25rem |
100px |
p-125 |
padding: 7.813rem |
125px |
p-150 |
padding: 9.375rem |
150px |
p-175 |
padding: 10.938rem |
175px |
p-200 |
padding: 12.5rem |
200px |
p-240 |
padding: 15rem |
240px |
p-280 |
padding: 17.5rem |
280px |
p-320 |
padding: 20rem |
320px |
|
pt-{*}
|
Properties
|
|
|---|---|---|
pt-0 |
padding-top: 0 |
0
|
pt-2 |
padding-top: 0.125rem |
2px |
pt-3 |
padding-top: 0.188rem |
3px |
pt-4 |
padding-top: 0.25rem |
4px |
pt-5 |
padding-top: 0.313rem |
5px |
pt-6 |
padding-top: 0.375rem |
6px |
pt-8 |
padding-top: 0.5rem |
8px |
pt-10 |
padding-top: 0.625rem |
10px |
pt-15 |
padding-top: 0.938rem |
15px |
pt-20 |
padding-top: 1.25rem |
20px |
pt-25 |
padding-top: 1.563rem |
25px |
pt-30 |
padding-top: 1.875rem |
30px |
pt-40 |
padding-top: 2.5rem |
40px |
pt-50 |
padding-top: 3.125rem |
50px |
pt-60 |
padding-top: 3.75rem |
60px |
pt-70 |
padding-top: 4.375rem |
70px |
pt-80 |
padding-top: 5rem |
80px |
pt-100 |
padding-top: 6.25rem |
100px |
pt-125 |
padding-top: 7.813rem |
125px |
pt-150 |
padding-top: 9.375rem |
150px |
pt-175 |
padding-top: 10.938rem |
175px |
pt-200 |
padding-top: 12.5rem |
200px |
pt-240 |
padding-top: 15rem |
240px |
pt-280 |
padding-top: 17.5rem |
280px |
pt-320 |
padding-top: 20rem |
320px |
|
pr-{*}
|
Properties
|
|
|---|---|---|
pr-0 |
padding-right: 0 |
0
|
pr-2 |
padding-right: 0.125rem |
2px |
pr-3 |
padding-right: 0.188rem |
3px |
pr-4 |
padding-right: 0.25rem |
4px |
pr-5 |
padding-right: 0.313rem |
5px |
pr-6 |
padding-right: 0.375rem |
6px |
pr-8 |
padding-right: 0.5rem |
8px |
pr-10 |
padding-right: 0.625rem |
10px |
pr-15 |
padding-right: 0.938rem |
15px |
pr-20 |
padding-right: 1.25rem |
20px |
pr-25 |
padding-right: 1.563rem |
25px |
pr-30 |
padding-right: 1.875rem |
30px |
pr-40 |
padding-right: 2.5rem |
40px |
pr-50 |
padding-right: 3.125rem |
50px |
pr-60 |
padding-right: 3.75rem |
60px |
pr-70 |
padding-right: 4.375rem |
70px |
pr-80 |
padding-right: 5rem |
80px |
pr-100 |
padding-right: 6.25rem |
100px |
pr-125 |
padding-right: 7.813rem |
125px |
pr-150 |
padding-right: 9.375rem |
150px |
pr-175 |
padding-right: 10.938rem |
175px |
pr-200 |
padding-right: 12.5rem |
200px |
pr-240 |
padding-right: 15rem |
240px |
pr-280 |
padding-right: 17.5rem |
280px |
pr-320 |
padding-right: 20rem |
320px |
|
pb-{*}
|
Properties
|
|
|---|---|---|
pb-0 |
padding-bottom: 0 |
0
|
pb-2 |
padding-bottom: 0.125rem |
2px |
pb-3 |
padding-bottom: 0.188rem |
3px |
pb-4 |
padding-bottom: 0.25rem |
4px |
pb-5 |
padding-bottom: 0.313rem |
5px |
pb-6 |
padding-bottom: 0.375rem |
6px |
pb-8 |
padding-bottom: 0.5rem |
8px |
pb-10 |
padding-bottom: 0.625rem |
10px |
pb-15 |
padding-bottom: 0.938rem |
15px |
pb-20 |
padding-bottom: 1.25rem |
20px |
pb-25 |
padding-bottom: 1.563rem |
25px |
pb-30 |
padding-bottom: 1.875rem |
30px |
pb-40 |
padding-bottom: 2.5rem |
40px |
pb-50 |
padding-bottom: 3.125rem |
50px |
pb-60 |
padding-bottom: 3.75rem |
60px |
pb-70 |
padding-bottom: 4.375rem |
70px |
pb-80 |
padding-bottom: 5rem |
80px |
pb-100 |
padding-bottom: 6.25rem |
100px |
pb-125 |
padding-bottom: 7.813rem |
125px |
pb-150 |
padding-bottom: 9.375rem |
150px |
pb-175 |
padding-bottom: 10.938rem |
175px |
pb-200 |
padding-bottom: 12.5rem |
200px |
pb-240 |
padding-bottom: 15rem |
240px |
pb-280 |
padding-bottom: 17.5rem |
280px |
pb-320 |
padding-bottom: 20rem |
320px |
|
pl-{*}
|
Properties
|
|
|---|---|---|
pl-0 |
padding-left: 0 |
0
|
pl-2 |
padding-left: 0.125rem |
2px |
pl-3 |
padding-left: 0.188rem |
3px |
pl-4 |
padding-left: 0.25rem |
4px |
pl-5 |
padding-left: 0.313rem |
5px |
pl-6 |
padding-left: 0.375rem |
6px |
pl-8 |
padding-left: 0.5rem |
8px |
pl-10 |
padding-left: 0.625rem |
10px |
pl-15 |
padding-left: 0.938rem |
15px |
pl-20 |
padding-left: 1.25rem |
20px |
pl-25 |
padding-left: 1.563rem |
25px |
pl-30 |
padding-left: 1.875rem |
30px |
pl-40 |
padding-left: 2.5rem |
40px |
pl-50 |
padding-left: 3.125rem |
50px |
pl-60 |
padding-left: 3.75rem |
60px |
pl-70 |
padding-left: 4.375rem |
70px |
pl-80 |
padding-left: 5rem |
80px |
pl-100 |
padding-left: 6.25rem |
100px |
pl-125 |
padding-left: 7.813rem |
125px |
pl-150 |
padding-left: 9.375rem |
150px |
pl-175 |
padding-left: 10.938rem |
175px |
pl-200 |
padding-left: 12.5rem |
200px |
pl-240 |
padding-left: 15rem |
240px |
pl-280 |
padding-left: 17.5rem |
280px |
pl-320 |
padding-left: 20rem |
320px |
|
px-{*}
|
Properties
|
|
|---|---|---|
px-0 |
padding-left: 0padding-right: 0 |
0
|
px-2 |
padding-left: 0.125rempadding-right: 0.125rem |
2px |
px-3 |
padding-left: 0.188rempadding-right: 0.188rem |
3px |
px-4 |
padding-left: 0.25rempadding-right: 0.25rem |
4px |
px-5 |
padding-left: 0.313rempadding-right: 0.313rem |
5px |
px-6 |
padding-left: 0.375rempadding-right: 0.375rem |
6px |
px-8 |
padding-left: 0.5rempadding-right: 0.5rem |
8px |
px-10 |
padding-left: 0.625rempadding-right: 0.625rem |
10px |
px-15 |
padding-left: 0.938rempadding-right: 0.938rem |
15px |
px-20 |
padding-left: 1.25rempadding-right: 1.25rem |
20px |
px-25 |
padding-left: 1.563rempadding-right: 1.563rem |
25px |
px-30 |
padding-left: 1.875rempadding-right: 1.875rem |
30px |
px-40 |
padding-left: 2.5rempadding-right: 2.5rem |
40px |
px-50 |
padding-left: 3.125rempadding-right: 3.125rem |
50px |
px-60 |
padding-left: 3.75rempadding-right: 3.75rem |
60px |
px-70 |
padding-left: 4.375rempadding-right: 4.375rem |
70px |
px-80 |
padding-left: 5rempadding-right: 5rem |
80px |
px-100 |
padding-left: 6.25rempadding-right: 6.25rem |
100px |
px-125 |
padding-left: 7.813rempadding-right: 7.813rem |
125px |
px-150 |
padding-left: 9.375rempadding-right: 9.375rem |
150px |
px-175 |
padding-left: 10.938rempadding-right: 10.938rem |
175px |
px-200 |
padding-left: 12.5rempadding-right: 12.5rem |
200px |
px-240 |
padding-left: 15rempadding-right: 15rem |
240px |
px-280 |
padding-left: 17.5rempadding-right: 17.5rem |
280px |
px-320 |
padding-left: 20rempadding-right: 20rem |
320px |
|
py-{*}
|
Properties
|
|
|---|---|---|
py-0 |
padding-top: 0padding-bottom: 0 |
0
|
py-2 |
padding-top: 0.125rempadding-bottom: 0.125rem |
2px |
py-3 |
padding-top: 0.188rempadding-bottom: 0.188rem |
3px |
py-4 |
padding-top: 0.25rempadding-bottom: 0.25rem |
4px |
py-5 |
padding-top: 0.313rempadding-bottom: 0.313rem |
5px |
py-6 |
padding-top: 0.375rempadding-bottom: 0.375rem |
6px |
py-8 |
padding-top: 0.5rempadding-bottom: 0.5rem |
8px |
py-10 |
padding-top: 0.625rempadding-bottom: 0.625rem |
10px |
py-15 |
padding-top: 0.938rempadding-bottom: 0.938rem |
15px |
py-20 |
padding-top: 1.25rempadding-bottom: 1.25rem |
20px |
py-25 |
padding-top: 1.563rempadding-bottom: 1.563rem |
25px |
py-30 |
padding-top: 1.875rempadding-bottom: 1.875rem |
30px |
py-40 |
padding-top: 2.5rempadding-bottom: 2.5rem |
40px |
py-50 |
padding-top: 3.125rempadding-bottom: 3.125rem |
50px |
py-60 |
padding-top: 3.75rempadding-bottom: 3.75rem |
60px |
py-70 |
padding-top: 4.375rempadding-bottom: 4.375rem |
70px |
py-80 |
padding-top: 5rempadding-bottom: 5rem |
80px |
py-100 |
padding-top: 6.25rempadding-bottom: 6.25rem |
100px |
py-125 |
padding-top: 7.813rempadding-bottom: 7.813rem |
125px |
py-150 |
padding-top: 9.375rempadding-bottom: 9.375rem |
150px |
py-175 |
padding-top: 10.938rempadding-bottom: 10.938rem |
175px |
py-200 |
padding-top: 12.5rempadding-bottom: 12.5rem |
200px |
py-240 |
padding-top: 15rempadding-bottom: 15rem |
240px |
py-280 |
padding-top: 17.5rempadding-bottom: 17.5rem |
280px |
py-320 |
padding-top: 20rempadding-bottom: 20rem |
320px |
utilities.scss API