연습장:Sakura

  • 최근 수정 시각: 2023년 10월 10일 (화) 00:31
  • 창작 문서는 문서 별 라이선스를 확인하세요. 실용 문서는 다른 조건이 없는 한 크리에이티브 커먼즈 저작자표시-동일조건변경허락 3.0에 따라 사용할 수 있습니다. 자세한 내용은 이용 약관을 참고하세요.
    이용자 보호 창구 | evewiki.kr@gmail.com후원계좌 | 100-152-076102 케이뱅크 김성보
편집 토론 역사
Sakura (토론 | 기여)님의 2023년 10월 10일 (화) 00:31 판 (→Padding)

기능 틀

테마(라이트모드/다크모드) 별 이미지

라이트모드에서 보입니다!

다크모드 전환 토글


Tailwind CSS 설명

무엇인가?


Tailwind CSS를 설명하는 영상

css 파일 대신 html에 코드를 쓰는 걸로 대신할 수 있는 CSS 프레임워크 라고는 하지만 이해 못하시죠? 간단히 말하자면 style="" 사이에 무언가를 쓰는것 대신에 class=""에 적어서 적용할 수 있게 만드는 기능입니다.

왜 쓰는가?

코드를 짜는 시간이 짧아집니다. 대표적으로 틀을 가운데 두기 위해 많이 쓰는 style="margin-right: auto; margin-left: auto;"는 class="mx-0"로 짧게 작성할 수 있습니다. 또, 문서의 다크모드 대응도 가능하게 됩니다. 기존 방식에서는 다크모드에 대응할 수 없고, 대응하고자 하면 관리자가 미리 작성해놓은 class="evewiki-dark-txt" 같은걸 써야했지만, 이제는 관리자가 미리 작성했느냐와는 관계 없이 class="dark:text-white"라고 작성하여 다크모드에서 글자를 흰색으로 보이게 할 수 있습니다.

Tailwind CSS 색상표

배경색(background), 테두리 색(border), 글자 색(color) 등 색상을 정할 때 Tailwind CSS에서는 이 색상표의 색을 기본으로 제공합니다. 물론, 검은색(black, #000)과 흰색(white, #fff)는 당연히 포함이죠! 또, 필요하다면 대괄호([,])를 이용해 별도의 색을 지정할 수도 있습니다. 예를 들어, text-[#00FF00]처럼 말이죠!

색상표
[ 펼치기 · 접기 ]

Slate

50

#f8fafc

100

#f1f5f9

200

#e2e8f0

300

#cbd5e1

400

#94a3b8

500

#64748b

600

#475569

700

#334155

800

#1e293b

900

#0f172a

950

#020617

Gray

50

#f9fafb

100

#f3f4f6

200

#e5e7eb

300

#d1d5db

400

#9ca3af

500

#6b7280

600

#4b5563

700

#374151

800

#1f2937

900

#111827

950

#030712

Zinc

50

#fafafa

100

#f4f4f5

200

#e4e4e7

300

#d4d4d8

400

#a1a1aa

500

#71717a

600

#52525b

700

#3f3f46

800

#27272a

900

#18181b

950

#09090b

Neutral

50

#fafafa

100

#f5f5f5

200

#e5e5e5

300

#d4d4d4

400

#a3a3a3

500

#737373

600

#525252

700

#404040

800

#262626

900

#171717

950

#0a0a0a

Stone

50

#fafaf9

100

#f5f5f4

200

#e7e5e4

300

#d6d3d1

400

#a8a29e

500

#78716c

600

#57534e

700

#44403c

800

#292524

900

#1c1917

950

#0c0a09

Red

50

#fef2f2

100

#fee2e2

200

#fecaca

300

#fca5a5

400

#f87171

500

#ef4444

600

#dc2626

700

#b91c1c

800

#991b1b

900

#7f1d1d

950

#450a0a

Orange

50

#fff7ed

100

#ffedd5

200

#fed7aa

300

#fdba74

400

#fb923c

500

#f97316

600

#ea580c

700

#c2410c

800

#9a3412

900

#7c2d12

950

#431407

Amber

50

#fffbeb

100

#fef3c7

200

#fde68a

300

#fcd34d

400

#fbbf24

500

#f59e0b

600

#d97706

700

#b45309

800

#92400e

900

#78350f

950

#451a03

Yellow

50

#fefce8

100

#fef9c3

200

#fef08a

300

#fde047

400

#facc15

500

#eab308

600

#ca8a04

700

#a16207

800

#854d0e

900

#713f12

950

#422006

Lime

50

#f7fee7

100

#ecfccb

200

#d9f99d

300

#bef264

400

#a3e635

500

#84cc16

600

#65a30d

700

#4d7c0f

800

#3f6212

900

#365314

950

#1a2e05

Green

50

#f0fdf4

100

#dcfce7

200

#bbf7d0

300

#86efac

400

#4ade80

500

#22c55e

600

#16a34a

700

#15803d

800

#166534

900

#14532d

950

#052e16

Emerald

50

#ecfdf5

100

#d1fae5

200

#a7f3d0

300

#6ee7b7

400

#34d399

500

#10b981

600

#059669

700

#047857

800

#065f46

900

#064e3b

950

#022c22

Teal

50

#f0fdfa

100

#ccfbf1

200

#99f6e4

300

#5eead4

400

#2dd4bf

500

#14b8a6

600

#0d9488

700

#0f766e

800

#115e59

900

#134e4a

950

#042f2e

Cyan

50

#ecfeff

100

#cffafe

200

#a5f3fc

300

#67e8f9

400

#22d3ee

500

#06b6d4

600

#0891b2

700

#0e7490

800

#155e75

900

#164e63

950

#083344

Sky

50

#f0f9ff

100

#e0f2fe

200

#bae6fd

300

#7dd3fc

400

#38bdf8

500

#0ea5e9

600

#0284c7

700

#0369a1

800

#075985

900

#0c4a6e

950

#082f49

Blue

50

#eff6ff

100

#dbeafe

200

#bfdbfe

300

#93c5fd

400

#60a5fa

500

#3b82f6

600

#2563eb

700

#1d4ed8

800

#1e40af

900

#1e3a8a

950

#172554

Indigo

50

#eef2ff

100

#e0e7ff

200

#c7d2fe

300

#a5b4fc

400

#818cf8

500

#6366f1

600

#4f46e5

700

#4338ca

800

#3730a3

900

#312e81

950

#1e1b4b

Violet

50

#f5f3ff

100

#ede9fe

200

#ddd6fe

300

#c4b5fd

400

#a78bfa

500

#8b5cf6

600

#7c3aed

700

#6d28d9

800

#5b21b6

900

#4c1d95

950

#2e1065

Purple

50

#faf5ff

100

#f3e8ff

200

#e9d5ff

300

#d8b4fe

400

#c084fc

500

#a855f7

600

#9333ea

700

#7e22ce

800

#6b21a8

900

#581c87

950

#3b0764

Fuchsia

50

#fdf4ff

100

#fae8ff

200

#f5d0fe

300

#f0abfc

400

#e879f9

500

#d946ef

600

#c026d3

700

#a21caf

800

#86198f

900

#701a75

950

#4a044e

Pink

50

#fdf2f8

100

#fce7f3

200

#fbcfe8

300

#f9a8d4

400

#f472b6

500

#ec4899

600

#db2777

700

#be185d

800

#9d174d

900

#831843

950

#500724

Rose

50

#fff1f2

100

#ffe4e6

200

#fecdd3

300

#fda4af

400

#fb7185

500

#f43f5e

600

#e11d48

700

#be123c

800

#9f1239

900

#881337

950

#4c0519

Tailwind CSS 코드

Padding

Class 이름

적용되는 Style

p-0

padding: 0px;

px-0

padding-left: 0px; padding-right: 0px;

py-0

padding-top: 0px; padding-bottom: 0px;

ps-0

padding-inline-start: 0px;

pe-0

padding-inline-end: 0px;

pt-0

padding-top: 0px;

pr-0

padding-right: 0px;

pb-0

padding-bottom: 0px;

pl-0

padding-left: 0px;

p-px

padding: 1px;

px-px

padding-left: 1px; padding-right: 1px;

py-px

padding-top: 1px; padding-bottom: 1px;

ps-px

padding-inline-start: 1px;

pe-px

padding-inline-end: 1px;

pt-px

padding-top: 1px;

pr-px

padding-right: 1px;

pb-px

padding-bottom: 1px;

pl-px

padding-left: 1px;

p-0.5

padding: 0.125rem; /* 1.875px */

px-0.5

padding-left: 0.125rem; /* 1.875px */ padding-right: 0.125rem; /* 1.875px */

py-0.5

padding-top: 0.125rem; /* 1.875px */ padding-bottom: 0.125rem; /* 1.875px */

ps-0.5

padding-inline-start: 0.125rem; /* 1.875px */

pe-0.5

padding-inline-end: 0.125rem; /* 1.875px */

pt-0.5

padding-top: 0.125rem; /* 1.875px */

pr-0.5

padding-right: 0.125rem; /* 1.875px */

pb-0.5

padding-bottom: 0.125rem; /* 1.875px */

pl-0.5

padding-left: 0.125rem; /* 1.875px */

p-1

padding: 0.25rem; /* 3.75px */

px-1

padding-left: 0.25rem; /* 3.75px */ padding-right: 0.25rem; /* 3.75px */

py-1

padding-top: 0.25rem; /* 3.75px */ padding-bottom: 0.25rem; /* 3.75px */

ps-1

padding-inline-start: 0.25rem; /* 3.75px */

pe-1

padding-inline-end: 0.25rem; /* 3.75px */

pt-1

padding-top: 0.25rem; /* 3.75px */

pr-1

padding-right: 0.25rem; /* 3.75px */

pb-1

padding-bottom: 0.25rem; /* 3.75px */

pl-1

padding-left: 0.25rem; /* 3.75px */

p-1.5

padding: 0.375rem; /* 5.625px */

px-1.5

padding-left: 0.375rem; /* 5.625px */ padding-right: 0.375rem; /* 5.625px */

py-1.5

padding-top: 0.375rem; /* 5.625px */ padding-bottom: 0.375rem; /* 5.625px */

ps-1.5

padding-inline-start: 0.375rem; /* 5.625px */

pe-1.5

padding-inline-end: 0.375rem; /* 5.625px */

pt-1.5

padding-top: 0.375rem; /* 5.625px */

pr-1.5

padding-right: 0.375rem; /* 5.625px */

pb-1.5

padding-bottom: 0.375rem; /* 5.625px */

pl-1.5

padding-left: 0.375rem; /* 5.625px */

p-2

padding: 0.5rem; /* 7.5px */

px-2

padding-left: 0.5rem; /* 7.5px */ padding-right: 0.5rem; /* 7.5px */

py-2

padding-top: 0.5rem; /* 7.5px */ padding-bottom: 0.5rem; /* 7.5px */

ps-2

padding-inline-start: 0.5rem; /* 7.5px */

pe-2

padding-inline-end: 0.5rem; /* 7.5px */

pt-2

padding-top: 0.5rem; /* 7.5px */

p-2

padding-right: 0.5rem; /* 7.5px */

pb-2

padding-bottom: 0.5rem; /* 7.5px */

p-2

padding-left: 0.5rem; /* 7.5px */

p-2.5

padding: 0.625rem; /* 9.375px */

px-2.5

padding-left: 0.625rem; /* 9.375px */ padding-right: 0.625rem; /* 9.375px */

py-2.5

padding-top: 0.625rem; /* 9.375px */ padding-bottom: 0.625rem; /* 9.375px */

ps-2.5

padding-inline-start: 0.625rem; /* 9.375px */

pe-2.5

padding-inline-end: 0.625rem; /* 9.375px */

pt-2.5

padding-top: 0.625rem; /* 9.375px */

p-2.5

padding-right: 0.625rem; /* 9.375px */

pb-2.5

padding-bottom: 0.625rem; /* 9.375px */

p-2.5

padding-left: 0.625rem; /* 9.375px */

p-3

padding: 0.75rem; /* 11.25px */

px-3

padding-left: 0.75rem; /* 11.25px */ padding-right: 0.75rem; /* 11.25px */

py-3

padding-top: 0.75rem; /* 11.25px */ padding-bottom: 0.75rem; /* 11.25px */

ps-3

padding-inline-start: 0.75rem; /* 11.25px */

pe-3

padding-inline-end: 0.75rem; /* 11.25px */

pt-3

padding-top: 0.75rem; /* 11.25px */

pr-3

padding-right: 0.75rem; /* 11.25px */

pb-3

padding-bottom: 0.75rem; /* 11.25px */

pl-3

padding-left: 0.75rem; /* 11.25px */

p-3.5

padding: 0.875rem; /* 13.125px */

px-3.5

padding-left: 0.875rem; /* 13.125px */ padding-right: 0.875rem; /* 13.125px */

py-3.5

padding-top: 0.875rem; /* 13.125px */ padding-bottom: 0.875rem; /* 13.125px */

ps-3.5

padding-inline-start: 0.875rem; /* 13.125px */

pe-3.5

padding-inline-end: 0.875rem; /* 13.125px */

pt-3.5

padding-top: 0.875rem; /* 13.125px */

pr-3.5

padding-right: 0.875rem; /* 13.125px */

pb-3.5

padding-bottom: 0.875rem; /* 13.125px */

pl-3.5

padding-left: 0.875rem; /* 13.125px */

p-4

padding: 1rem; /* 15px */

px-4

padding-left: 1rem; /* 15px */ padding-right: 1rem; /* 15px */

py-4

padding-top: 1rem; /* 15px */ padding-bottom: 1rem; /* 15px */

ps-4

padding-inline-start: 1rem; /* 15px */

pe-4

padding-inline-end: 1rem; /* 15px */

pt-4

padding-top: 1rem; /* 15px */

pr-4

padding-right: 1rem; /* 15px */

pb-4

padding-bottom: 1rem; /* 15px */

pl-4

padding-left: 1rem; /* 15px */

p-5

padding: 1.25rem; /* 18.75px */

px-5

padding-left: 1.25rem; /* 18.75px */ padding-right: 1.25rem; /* 18.75px */

py-5

padding-top: 1.25rem; /* 18.75px */ padding-bottom: 1.25rem; /* 18.75px */

ps-5

padding-inline-start: 1.25rem; /* 18.75px */

pe-5

padding-inline-end: 1.25rem; /* 18.75px */

pt-5

padding-top: 1.25rem; /* 18.75px */

pr-5

padding-right: 1.25rem; /* 18.75px */

pb-5

padding-bottom: 1.25rem; /* 18.75px */

pl-5

padding-left: 1.25rem; /* 18.75px */

p-6

padding: 1.5rem; /* 22.5px */

px-6

padding-left: 1.5rem; /* 22.5px */ padding-right: 1.5rem; /* 22.5px */

py-6

padding-top: 1.5rem; /* 22.5px */ padding-bottom: 1.5rem; /* 22.5px */

ps-6

padding-inline-start: 1.5rem; /* 22.5px */

pe-6

padding-inline-end: 1.5rem; /* 22.5px */

pt-6

padding-top: 1.5rem; /* 22.5px */

pr-6

padding-right: 1.5rem; /* 22.5px */

pb-6

padding-bottom: 1.5rem; /* 22.5px */

pl-6

padding-left: 1.5rem; /* 22.5px */

p-7

padding: 1.75rem; /* 26.25px */

px-7

padding-left: 1.75rem; /* 26.25px */ padding-right: 1.75rem; /* 26.25px */

py-7

padding-top: 1.75rem; /* 26.25px */ padding-bottom: 1.75rem; /* 26.25px */

ps-7

padding-inline-start: 1.75rem; /* 26.25px */

pe-7

padding-inline-end: 1.75rem; /* 26.25px */

pt-7

padding-top: 1.75rem; /* 26.25px */

pr-7

padding-right: 1.75rem; /* 26.25px */

pb-7

padding-bottom: 1.75rem; /* 26.25px */

pl-7

padding-left: 1.75rem; /* 26.25px */

p-8

padding: 2rem; /* 30px */

px-8

padding-left: 2rem; /* 30px */ padding-right: 2rem; /* 30px */

py-8

padding-top: 2rem; /* 30px */ padding-bottom: 2rem; /* 30px */

ps-8

padding-inline-start: 2rem; /* 30px */

pe-8

padding-inline-end: 2rem; /* 30px */

pt-8

padding-top: 2rem; /* 30px */

pr-8

padding-right: 2rem; /* 30px */

pb-8

padding-bottom: 2rem; /* 30px */

pl-8

padding-left: 2rem; /* 30px */

p-9

padding: 2.25rem; /* 33.75px */

px-9

padding-left: 2.25rem; /* 33.75px */ padding-right: 2.25rem; /* 33.75px */

py-9

padding-top: 2.25rem; /* 33.75px */ padding-bottom: 2.25rem; /* 33.75px */

ps-9

padding-inline-start: 2.25rem; /* 33.75px */

pe-9

padding-inline-end: 2.25rem; /* 33.75px */

pt-9

padding-top: 2.25rem; /* 33.75px */

pr-9

padding-right: 2.25rem; /* 33.75px */

pb-9

padding-bottom: 2.25rem; /* 33.75px */

pl-9

padding-left: 2.25rem; /* 33.75px */

p-10

padding: 2.5rem; /* 33.75px */

px-10

padding-left: 2.5rem; /* 33.75px */ padding-right: 2.5rem; /* 33.75px */

py-10

padding-top: 2.5rem; /* 33.75px */ padding-bottom: 2.5rem; /* 33.75px */

ps-10

padding-inline-start: 2.5rem; /* 33.75px */

pe-10

padding-inline-end: 2.5rem; /* 33.75px */

pt-10

padding-top: 2.5rem; /* 33.75px */

pr-10

padding-right: 2.5rem; /* 33.75px */

pb-10

padding-bottom: 2.5rem; /* 33.75px */

pl-10

padding-left: 2.5rem; /* 33.75px */

p-11

padding: 2.75rem; /* 41.25px */

px-11

padding-left: 2.75rem; /* 41.25px */ padding-right: 2.75rem; /* 41.25px */

py-11

padding-top: 2.75rem; /* 41.25px */ padding-bottom: 2.75rem; /* 41.25px */

ps-11

padding-inline-start: 2.75rem; /* 41.25px */

pe-11

padding-inline-end: 2.75rem; /* 41.25px */

pt-11

padding-top: 2.75rem; /* 41.25px */

pr-11

padding-right: 2.75rem; /* 41.25px */

pb-11

padding-bottom: 2.75rem; /* 41.25px */

pl-11

padding-left: 2.75rem; /* 41.25px */

p-12

padding: 3rem; /* 45px */

px-12

padding-left: 3rem; /* 45px */ padding-right: 3rem; /* 45px */

py-12

padding-top: 3rem; /* 45px */ padding-bottom: 3rem; /* 45px */

ps-12

padding-inline-start: 3rem; /* 45px */

pe-12

padding-inline-end: 3rem; /* 45px */

pt-12

padding-top: 3rem; /* 45px */

pr-12

padding-right: 3rem; /* 45px */

pb-12

padding-bottom: 3rem; /* 45px */

pl-12

padding-left: 3rem; /* 45px */

p-14

padding: 3.5rem; /* 52.5px */

px-14

padding-left: 3.5rem; /* 52.5px */ padding-right: 3.5rem; /* 52.5px */

py-14

padding-top: 3.5rem; /* 52.5px */ padding-bottom: 3.5rem; /* 52.5px */

ps-14

padding-inline-start: 3.5rem; /* 52.5px */

pe-14

padding-inline-end: 3.5rem; /* 52.5px */

pt-14

padding-top: 3.5rem; /* 52.5px */

pr-14

padding-right: 3.5rem; /* 52.5px */

pb-14

padding-bottom: 3.5rem; /* 52.5px */

pl-14

padding-left: 3.5rem; /* 52.5px */

p-16

padding: 4rem; /* 60px */

px-16

padding-left: 4rem; /* 60px */ padding-right: 4rem; /* 60px */

py-16

padding-top: 4rem; /* 60px */ padding-bottom: 4rem; /* 60px */

ps-16

padding-inline-start: 4rem; /* 60px */

pe-16

padding-inline-end: 4rem; /* 60px */

pt-16

padding-top: 4rem; /* 60px */

pr-16

padding-right: 4rem; /* 60px */

pb-16

padding-bottom: 4rem; /* 60px */

pl-16

padding-left: 4rem; /* 60px */

p-20

padding: 5rem; /* 75px */

px-20

padding-left: 5rem; /* 75px */ padding-right: 5rem; /* 75px */

py-20

padding-top: 5rem; /* 75px */ padding-bottom: 5rem; /* 75px */

ps-20

padding-inline-start: 5rem; /* 75px */

pe-20

padding-inline-end: 5rem; /* 75px */

pt-20

padding-top: 5rem; /* 75px */

p-20

padding-right: 5rem; /* 75px */

pb-20

padding-bottom: 5rem; /* 75px */

p-20

padding-left: 5rem; /* 75px */

p-24

padding: 6rem; /* 90px */

px-24

padding-left: 6rem; /* 90px */ padding-right: 6rem; /* 90px */

py-24

padding-top: 6rem; /* 90px */ padding-bottom: 6rem; /* 90px */

ps-24

padding-inline-start: 6rem; /* 90px */

pe-24

padding-inline-end: 6rem; /* 90px */

pt-24

padding-top: 6rem; /* 90px */

p-24

padding-right: 6rem; /* 90px */

pb-24

padding-bottom: 6rem; /* 90px */

p-24

padding-left: 6rem; /* 90px */

p-28

padding: 7rem; /* 105px */

px-28

padding-left: 7rem; /* 105px */ padding-right: 7rem; /* 105px */

py-28

padding-top: 7rem; /* 105px */ padding-bottom: 7rem; /* 105px */

ps-28

padding-inline-start: 7rem; /* 105px */

pe-28

padding-inline-end: 7rem; /* 105px */

pt-28

padding-top: 7rem; /* 105px */

p-28

padding-right: 7rem; /* 105px */

pb-28

padding-bottom: 7rem; /* 105px */

p-28

padding-left: 7rem; /* 105px */

p-32

padding: 8rem; /* 120px */

px-32

padding-left: 8rem; /* 120px */ padding-right: 8rem; /* 120px */

py-32

padding-top: 8rem; /* 120px */ padding-bottom: 8rem; /* 120px */

ps-32

padding-inline-start: 8rem; /* 120px */

pe-32

padding-inline-end: 8rem; /* 120px */

pt-32

padding-top: 8rem; /* 120px */

pr-32

padding-right: 8rem; /* 120px */

pb-32

padding-bottom: 8rem; /* 120px */

pl-32

padding-left: 8rem; /* 120px */

p-36

padding: 9rem; /* 135px */

px-36

padding-left: 9rem; /* 135px */ padding-right: 9rem; /* 135px */

py-36

padding-top: 9rem; /* 135px */ padding-bottom: 9rem; /* 135px */

ps-36

padding-inline-start: 9rem; /* 135px */

pe-36

padding-inline-end: 9rem; /* 135px */

pt-36

padding-top: 9rem; /* 135px */

pr-36

padding-right: 9rem; /* 135px */

pb-36

padding-bottom: 9rem; /* 135px */

pl-36

padding-left: 9rem; /* 135px */

p-40

padding: 10rem; /* 150px */

px-40

padding-left: 10rem; /* 150px */ padding-right: 10rem; /* 150px */

py-40

padding-top: 10rem; /* 150px */ padding-bottom: 10rem; /* 150px */

ps-40

padding-inline-start: 10rem; /* 150px */

pe-40

padding-inline-end: 10rem; /* 150px */

pt-40

padding-top: 10rem; /* 150px */

pr-40

padding-right: 10rem; /* 150px */

pb-40

padding-bottom: 10rem; /* 150px */

pl-40

padding-left: 10rem; /* 150px */

p-44

padding: 11rem; /* 165px */

px-44

padding-left: 11rem; /* 165px */ padding-right: 11rem; /* 165px */

py-44

padding-top: 11rem; /* 165px */ padding-bottom: 11rem; /* 165px */

ps-44

padding-inline-start: 11rem; /* 165px */

pe-44

padding-inline-end: 11rem; /* 165px */

pt-44

padding-top: 11rem; /* 165px */

pr-44

padding-right: 11rem; /* 165px */

pb-44

padding-bottom: 11rem; /* 165px */

pl-44

padding-left: 11rem; /* 165px */

p-48

padding: 12rem; /* 180px */

px-48

padding-left: 12rem; /* 180px */ padding-right: 12rem; /* 180px */

py-48

padding-top: 12rem; /* 180px */ padding-bottom: 12rem; /* 180px */

ps-48

padding-inline-start: 12rem; /* 180px */

pe-48

padding-inline-end: 12rem; /* 180px */

pt-48

padding-top: 12rem; /* 180px */

pr-48

padding-right: 12rem; /* 180px */

pb-48

padding-bottom: 12rem; /* 180px */

pl-48

padding-left: 12rem; /* 180px */

p-52

padding: 13rem; /* 195px */

px-52

padding-left: 13rem; /* 195px */ padding-right: 13rem; /* 195px */

py-52

padding-top: 13rem; /* 195px */ padding-bottom: 13rem; /* 195px */

ps-52

padding-inline-start: 13rem; /* 195px */

pe-52

padding-inline-end: 13rem; /* 195px */

pt-52

padding-top: 13rem; /* 195px */

pr-52

padding-right: 13rem; /* 195px */

pb-52

padding-bottom: 13rem; /* 195px */

pl-52

padding-left: 13rem; /* 195px */

p-56

padding: 14rem; /* 210px */

px-56

padding-left: 14rem; /* 210px */ padding-right: 14rem; /* 210px */

py-56

padding-top: 14rem; /* 210px */ padding-bottom: 14rem; /* 210px */

ps-56

padding-inline-start: 14rem; /* 210px */

pe-56

padding-inline-end: 14rem; /* 210px */

pt-56

padding-top: 14rem; /* 210px */

pr-56

padding-right: 14rem; /* 210px */

pb-56

padding-bottom: 14rem; /* 210px */

pl-56

padding-left: 14rem; /* 210px */

p-60

padding: 15rem; /* 225px */

px-60

padding-left: 15rem; /* 225px */ padding-right: 15rem; /* 225px */

py-60

padding-top: 15rem; /* 225px */ padding-bottom: 15rem; /* 225px */

ps-60

padding-inline-start: 15rem; /* 225px */

pe-60

padding-inline-end: 15rem; /* 225px */

pt-60

padding-top: 15rem; /* 225px */

pr-60

padding-right: 15rem; /* 225px */

pb-60

padding-bottom: 15rem; /* 225px */

pl-60

padding-left: 15rem; /* 225px */

p-64

padding: 16rem; /* 240px */

px-64

padding-left: 16rem; /* 240px */ padding-right: 16rem; /* 240px */

py-64

padding-top: 16rem; /* 240px */ padding-bottom: 16rem; /* 240px */

ps-64

padding-inline-start: 16rem; /* 240px */

pe-64

padding-inline-end: 16rem; /* 240px */

pt-64

padding-top: 16rem; /* 240px */

pr-64

padding-right: 16rem; /* 240px */

pb-64

padding-bottom: 16rem; /* 240px */

pl-64

padding-left: 16rem; /* 240px */

p-72

padding: 18rem; /* 270px */

px-72

padding-left: 18rem; /* 270px */ padding-right: 18rem; /* 270px */

py-72

padding-top: 18rem; /* 270px */ padding-bottom: 18rem; /* 270px */

ps-72

padding-inline-start: 18rem; /* 270px */

pe-72

padding-inline-end: 18rem; /* 270px */

pt-72

padding-top: 18rem; /* 270px */

pr-72

padding-right: 18rem; /* 270px */

pb-72

padding-bottom: 18rem; /* 270px */

pl-72

padding-left: 18rem; /* 270px */

p-80

padding: 20rem; /* 300px */

px-80

padding-left: 20rem; /* 300px */ padding-right: 20rem; /* 300px */

py-80

padding-top: 20rem; /* 300px */ padding-bottom: 20rem; /* 300px */

ps-80

padding-inline-start: 20rem; /* 300px */

pe-80

padding-inline-end: 20rem; /* 300px */

pt-80

padding-top: 20rem; /* 300px */

pr-80

padding-right: 20rem; /* 300px */

pb-80

padding-bottom: 20rem; /* 300px */

pl-80

padding-left: 20rem; /* 300px */

p-96

padding: 24rem; /* 360px */

px-96

padding-left: 24rem; /* 360px */ padding-right: 24rem; /* 360px */

py-96

padding-top: 24rem; /* 360px */ padding-bottom: 24rem; /* 360px */

ps-96

padding-inline-start: 24rem; /* 360px */

pe-96

padding-inline-end: 24rem; /* 360px */

pt-96

padding-top: 24rem; /* 360px */

pr-96

padding-right: 24rem; /* 360px */

pb-96

padding-bottom: 24rem; /* 360px */

pl-96

padding-left: 24rem; /* 360px */


Margin