Padding
Controls the padding of an element.
| Class | Style |
|---|---|
p-0 | padding: 0rem; |
p-1 | padding: 0.25rem; |
p-2 | padding: 0.5rem; |
p-3 | padding: 0.75rem; |
p-4 | padding: 1rem; |
p-5 | padding: 1.25rem; |
p-6 | padding: 1.5rem; |
p-7 | padding: 1.75rem; |
p-8 | padding: 2rem; |
p-9 | padding: 2.25rem; |
p-10 | padding: 2.5rem; |
p-11 | padding: 2.75rem; |
p-12 | padding: 3rem; |
p-13 | padding: 3.25rem; |
p-14 | padding: 3.5rem; |
p-15 | padding: 3.75rem; |
p-16 | padding: 4rem; |
p-17 | padding: 4.25rem; |
p-18 | padding: 4.5rem; |
p-19 | padding: 4.75rem; |
p-20 | padding: 5rem; |
p-21 | padding: 5.25rem; |
p-22 | padding: 5.5rem; |
p-23 | padding: 5.75rem; |
p-24 | padding: 6rem; |
p-25 | padding: 6.25rem; |
p-26 | padding: 6.5rem; |
p-27 | padding: 6.75rem; |
p-28 | padding: 7rem; |
p-29 | padding: 7.25rem; |
p-30 | padding: 7.5rem; |
p-31 | padding: 7.75rem; |
p-32 | padding: 8rem; |
p-33 | padding: 8.25rem; |
p-34 | padding: 8.5rem; |
p-35 | padding: 8.75rem; |
p-36 | padding: 9rem; |
p-37 | padding: 9.25rem; |
p-38 | padding: 9.5rem; |
p-39 | padding: 9.75rem; |
p-40 | padding: 10rem; |
p-41 | padding: 10.25rem; |
p-42 | padding: 10.5rem; |
p-43 | padding: 10.75rem; |
p-44 | padding: 11rem; |
p-45 | padding: 11.25rem; |
p-46 | padding: 11.5rem; |
p-47 | padding: 11.75rem; |
p-48 | padding: 12rem; |
p-49 | padding: 12.25rem; |
p-50 | padding: 12.5rem; |
p-51 | padding: 12.75rem; |
p-52 | padding: 13rem; |
p-53 | padding: 13.25rem; |
p-54 | padding: 13.5rem; |
p-55 | padding: 13.75rem; |
p-56 | padding: 14rem; |
p-57 | padding: 14.25rem; |
p-58 | padding: 14.5rem; |
p-59 | padding: 14.75rem; |
p-60 | padding: 15rem; |
p-61 | padding: 15.25rem; |
p-62 | padding: 15.5rem; |
p-63 | padding: 15.75rem; |
p-64 | padding: 16rem; |
p-65 | padding: 16.25rem; |
p-66 | padding: 16.5rem; |
p-67 | padding: 16.75rem; |
p-68 | padding: 17rem; |
p-69 | padding: 17.25rem; |
p-70 | padding: 17.5rem; |
p-71 | padding: 17.75rem; |
p-72 | padding: 18rem; |
p-73 | padding: 18.25rem; |
p-74 | padding: 18.5rem; |
p-75 | padding: 18.75rem; |
p-76 | padding: 19rem; |
p-77 | padding: 19.25rem; |
p-78 | padding: 19.5rem; |
p-79 | padding: 19.75rem; |
p-80 | padding: 20rem; |
p-81 | padding: 20.25rem; |
p-82 | padding: 20.5rem; |
p-83 | padding: 20.75rem; |
p-84 | padding: 21rem; |
p-85 | padding: 21.25rem; |
p-86 | padding: 21.5rem; |
p-87 | padding: 21.75rem; |
p-88 | padding: 22rem; |
p-89 | padding: 22.25rem; |
p-90 | padding: 22.5rem; |
p-91 | padding: 22.75rem; |
p-92 | padding: 23rem; |
p-93 | padding: 23.25rem; |
p-94 | padding: 23.5rem; |
p-95 | padding: 23.75rem; |
p-96 | padding: 24rem; |
p-97 | padding: 24.25rem; |
p-98 | padding: 24.5rem; |
p-99 | padding: 24.75rem; |
p-100 | padding: 25rem; |
p-auto | padding: auto; |
p-px | padding: 1px; |
<div id="area"> <div class="p-8"> <p class="bg-indigo tc-white p-6">6</p> </div></div>Padding Bottom
Controls the bottom padding of an element.
| Class | Style |
|---|---|
pb-0 | padding-bottom: 0rem; |
pb-1 | padding-bottom: 0.25rem; |
pb-2 | padding-bottom: 0.5rem; |
pb-3 | padding-bottom: 0.75rem; |
pb-4 | padding-bottom: 1rem; |
pb-5 | padding-bottom: 1.25rem; |
pb-6 | padding-bottom: 1.5rem; |
pb-7 | padding-bottom: 1.75rem; |
pb-8 | padding-bottom: 2rem; |
pb-9 | padding-bottom: 2.25rem; |
pb-10 | padding-bottom: 2.5rem; |
pb-11 | padding-bottom: 2.75rem; |
pb-12 | padding-bottom: 3rem; |
pb-13 | padding-bottom: 3.25rem; |
pb-14 | padding-bottom: 3.5rem; |
pb-15 | padding-bottom: 3.75rem; |
pb-16 | padding-bottom: 4rem; |
pb-17 | padding-bottom: 4.25rem; |
pb-18 | padding-bottom: 4.5rem; |
pb-19 | padding-bottom: 4.75rem; |
pb-20 | padding-bottom: 5rem; |
pb-21 | padding-bottom: 5.25rem; |
pb-22 | padding-bottom: 5.5rem; |
pb-23 | padding-bottom: 5.75rem; |
pb-24 | padding-bottom: 6rem; |
pb-25 | padding-bottom: 6.25rem; |
pb-26 | padding-bottom: 6.5rem; |
pb-27 | padding-bottom: 6.75rem; |
pb-28 | padding-bottom: 7rem; |
pb-29 | padding-bottom: 7.25rem; |
pb-30 | padding-bottom: 7.5rem; |
pb-31 | padding-bottom: 7.75rem; |
pb-32 | padding-bottom: 8rem; |
pb-33 | padding-bottom: 8.25rem; |
pb-34 | padding-bottom: 8.5rem; |
pb-35 | padding-bottom: 8.75rem; |
pb-36 | padding-bottom: 9rem; |
pb-37 | padding-bottom: 9.25rem; |
pb-38 | padding-bottom: 9.5rem; |
pb-39 | padding-bottom: 9.75rem; |
pb-40 | padding-bottom: 10rem; |
pb-41 | padding-bottom: 10.25rem; |
pb-42 | padding-bottom: 10.5rem; |
pb-43 | padding-bottom: 10.75rem; |
pb-44 | padding-bottom: 11rem; |
pb-45 | padding-bottom: 11.25rem; |
pb-46 | padding-bottom: 11.5rem; |
pb-47 | padding-bottom: 11.75rem; |
pb-48 | padding-bottom: 12rem; |
pb-49 | padding-bottom: 12.25rem; |
pb-50 | padding-bottom: 12.5rem; |
pb-51 | padding-bottom: 12.75rem; |
pb-52 | padding-bottom: 13rem; |
pb-53 | padding-bottom: 13.25rem; |
pb-54 | padding-bottom: 13.5rem; |
pb-55 | padding-bottom: 13.75rem; |
pb-56 | padding-bottom: 14rem; |
pb-57 | padding-bottom: 14.25rem; |
pb-58 | padding-bottom: 14.5rem; |
pb-59 | padding-bottom: 14.75rem; |
pb-60 | padding-bottom: 15rem; |
pb-61 | padding-bottom: 15.25rem; |
pb-62 | padding-bottom: 15.5rem; |
pb-63 | padding-bottom: 15.75rem; |
pb-64 | padding-bottom: 16rem; |
pb-65 | padding-bottom: 16.25rem; |
pb-66 | padding-bottom: 16.5rem; |
pb-67 | padding-bottom: 16.75rem; |
pb-68 | padding-bottom: 17rem; |
pb-69 | padding-bottom: 17.25rem; |
pb-70 | padding-bottom: 17.5rem; |
pb-71 | padding-bottom: 17.75rem; |
pb-72 | padding-bottom: 18rem; |
pb-73 | padding-bottom: 18.25rem; |
pb-74 | padding-bottom: 18.5rem; |
pb-75 | padding-bottom: 18.75rem; |
pb-76 | padding-bottom: 19rem; |
pb-77 | padding-bottom: 19.25rem; |
pb-78 | padding-bottom: 19.5rem; |
pb-79 | padding-bottom: 19.75rem; |
pb-80 | padding-bottom: 20rem; |
pb-81 | padding-bottom: 20.25rem; |
pb-82 | padding-bottom: 20.5rem; |
pb-83 | padding-bottom: 20.75rem; |
pb-84 | padding-bottom: 21rem; |
pb-85 | padding-bottom: 21.25rem; |
pb-86 | padding-bottom: 21.5rem; |
pb-87 | padding-bottom: 21.75rem; |
pb-88 | padding-bottom: 22rem; |
pb-89 | padding-bottom: 22.25rem; |
pb-90 | padding-bottom: 22.5rem; |
pb-91 | padding-bottom: 22.75rem; |
pb-92 | padding-bottom: 23rem; |
pb-93 | padding-bottom: 23.25rem; |
pb-94 | padding-bottom: 23.5rem; |
pb-95 | padding-bottom: 23.75rem; |
pb-96 | padding-bottom: 24rem; |
pb-97 | padding-bottom: 24.25rem; |
pb-98 | padding-bottom: 24.5rem; |
pb-99 | padding-bottom: 24.75rem; |
pb-100 | padding-bottom: 25rem; |
pb-auto | padding-bottom: auto; |
pb-px | padding-bottom: 1px; |
<div id="area"> <div class="p-8"> <p class="bg-indigo tc-white pb-6">6</p> </div></div>Padding Left
Controls the left padding of an element.
| Class | Style |
|---|---|
pl-0 | padding-left: 0rem; |
pl-1 | padding-left: 0.25rem; |
pl-2 | padding-left: 0.5rem; |
pl-3 | padding-left: 0.75rem; |
pl-4 | padding-left: 1rem; |
pl-5 | padding-left: 1.25rem; |
pl-6 | padding-left: 1.5rem; |
pl-7 | padding-left: 1.75rem; |
pl-8 | padding-left: 2rem; |
pl-9 | padding-left: 2.25rem; |
pl-10 | padding-left: 2.5rem; |
pl-11 | padding-left: 2.75rem; |
pl-12 | padding-left: 3rem; |
pl-13 | padding-left: 3.25rem; |
pl-14 | padding-left: 3.5rem; |
pl-15 | padding-left: 3.75rem; |
pl-16 | padding-left: 4rem; |
pl-17 | padding-left: 4.25rem; |
pl-18 | padding-left: 4.5rem; |
pl-19 | padding-left: 4.75rem; |
pl-20 | padding-left: 5rem; |
pl-21 | padding-left: 5.25rem; |
pl-22 | padding-left: 5.5rem; |
pl-23 | padding-left: 5.75rem; |
pl-24 | padding-left: 6rem; |
pl-25 | padding-left: 6.25rem; |
pl-26 | padding-left: 6.5rem; |
pl-27 | padding-left: 6.75rem; |
pl-28 | padding-left: 7rem; |
pl-29 | padding-left: 7.25rem; |
pl-30 | padding-left: 7.5rem; |
pl-31 | padding-left: 7.75rem; |
pl-32 | padding-left: 8rem; |
pl-33 | padding-left: 8.25rem; |
pl-34 | padding-left: 8.5rem; |
pl-35 | padding-left: 8.75rem; |
pl-36 | padding-left: 9rem; |
pl-37 | padding-left: 9.25rem; |
pl-38 | padding-left: 9.5rem; |
pl-39 | padding-left: 9.75rem; |
pl-40 | padding-left: 10rem; |
pl-41 | padding-left: 10.25rem; |
pl-42 | padding-left: 10.5rem; |
pl-43 | padding-left: 10.75rem; |
pl-44 | padding-left: 11rem; |
pl-45 | padding-left: 11.25rem; |
pl-46 | padding-left: 11.5rem; |
pl-47 | padding-left: 11.75rem; |
pl-48 | padding-left: 12rem; |
pl-49 | padding-left: 12.25rem; |
pl-50 | padding-left: 12.5rem; |
pl-51 | padding-left: 12.75rem; |
pl-52 | padding-left: 13rem; |
pl-53 | padding-left: 13.25rem; |
pl-54 | padding-left: 13.5rem; |
pl-55 | padding-left: 13.75rem; |
pl-56 | padding-left: 14rem; |
pl-57 | padding-left: 14.25rem; |
pl-58 | padding-left: 14.5rem; |
pl-59 | padding-left: 14.75rem; |
pl-60 | padding-left: 15rem; |
pl-61 | padding-left: 15.25rem; |
pl-62 | padding-left: 15.5rem; |
pl-63 | padding-left: 15.75rem; |
pl-64 | padding-left: 16rem; |
pl-65 | padding-left: 16.25rem; |
pl-66 | padding-left: 16.5rem; |
pl-67 | padding-left: 16.75rem; |
pl-68 | padding-left: 17rem; |
pl-69 | padding-left: 17.25rem; |
pl-70 | padding-left: 17.5rem; |
pl-71 | padding-left: 17.75rem; |
pl-72 | padding-left: 18rem; |
pl-73 | padding-left: 18.25rem; |
pl-74 | padding-left: 18.5rem; |
pl-75 | padding-left: 18.75rem; |
pl-76 | padding-left: 19rem; |
pl-77 | padding-left: 19.25rem; |
pl-78 | padding-left: 19.5rem; |
pl-79 | padding-left: 19.75rem; |
pl-80 | padding-left: 20rem; |
pl-81 | padding-left: 20.25rem; |
pl-82 | padding-left: 20.5rem; |
pl-83 | padding-left: 20.75rem; |
pl-84 | padding-left: 21rem; |
pl-85 | padding-left: 21.25rem; |
pl-86 | padding-left: 21.5rem; |
pl-87 | padding-left: 21.75rem; |
pl-88 | padding-left: 22rem; |
pl-89 | padding-left: 22.25rem; |
pl-90 | padding-left: 22.5rem; |
pl-91 | padding-left: 22.75rem; |
pl-92 | padding-left: 23rem; |
pl-93 | padding-left: 23.25rem; |
pl-94 | padding-left: 23.5rem; |
pl-95 | padding-left: 23.75rem; |
pl-96 | padding-left: 24rem; |
pl-97 | padding-left: 24.25rem; |
pl-98 | padding-left: 24.5rem; |
pl-99 | padding-left: 24.75rem; |
pl-100 | padding-left: 25rem; |
pl-auto | padding-left: auto; |
pl-px | padding-left: 1px; |
<div id="area"> <div class="p-8"> <p class="bg-indigo tc-white pl-6">6</p> </div></div>Padding Right
Controls the right padding of an element.
| Class | Style |
|---|---|
pr-0 | padding-right: 0rem; |
pr-1 | padding-right: 0.25rem; |
pr-2 | padding-right: 0.5rem; |
pr-3 | padding-right: 0.75rem; |
pr-4 | padding-right: 1rem; |
pr-5 | padding-right: 1.25rem; |
pr-6 | padding-right: 1.5rem; |
pr-7 | padding-right: 1.75rem; |
pr-8 | padding-right: 2rem; |
pr-9 | padding-right: 2.25rem; |
pr-10 | padding-right: 2.5rem; |
pr-11 | padding-right: 2.75rem; |
pr-12 | padding-right: 3rem; |
pr-13 | padding-right: 3.25rem; |
pr-14 | padding-right: 3.5rem; |
pr-15 | padding-right: 3.75rem; |
pr-16 | padding-right: 4rem; |
pr-17 | padding-right: 4.25rem; |
pr-18 | padding-right: 4.5rem; |
pr-19 | padding-right: 4.75rem; |
pr-20 | padding-right: 5rem; |
pr-21 | padding-right: 5.25rem; |
pr-22 | padding-right: 5.5rem; |
pr-23 | padding-right: 5.75rem; |
pr-24 | padding-right: 6rem; |
pr-25 | padding-right: 6.25rem; |
pr-26 | padding-right: 6.5rem; |
pr-27 | padding-right: 6.75rem; |
pr-28 | padding-right: 7rem; |
pr-29 | padding-right: 7.25rem; |
pr-30 | padding-right: 7.5rem; |
pr-31 | padding-right: 7.75rem; |
pr-32 | padding-right: 8rem; |
pr-33 | padding-right: 8.25rem; |
pr-34 | padding-right: 8.5rem; |
pr-35 | padding-right: 8.75rem; |
pr-36 | padding-right: 9rem; |
pr-37 | padding-right: 9.25rem; |
pr-38 | padding-right: 9.5rem; |
pr-39 | padding-right: 9.75rem; |
pr-40 | padding-right: 10rem; |
pr-41 | padding-right: 10.25rem; |
pr-42 | padding-right: 10.5rem; |
pr-43 | padding-right: 10.75rem; |
pr-44 | padding-right: 11rem; |
pr-45 | padding-right: 11.25rem; |
pr-46 | padding-right: 11.5rem; |
pr-47 | padding-right: 11.75rem; |
pr-48 | padding-right: 12rem; |
pr-49 | padding-right: 12.25rem; |
pr-50 | padding-right: 12.5rem; |
pr-51 | padding-right: 12.75rem; |
pr-52 | padding-right: 13rem; |
pr-53 | padding-right: 13.25rem; |
pr-54 | padding-right: 13.5rem; |
pr-55 | padding-right: 13.75rem; |
pr-56 | padding-right: 14rem; |
pr-57 | padding-right: 14.25rem; |
pr-58 | padding-right: 14.5rem; |
pr-59 | padding-right: 14.75rem; |
pr-60 | padding-right: 15rem; |
pr-61 | padding-right: 15.25rem; |
pr-62 | padding-right: 15.5rem; |
pr-63 | padding-right: 15.75rem; |
pr-64 | padding-right: 16rem; |
pr-65 | padding-right: 16.25rem; |
pr-66 | padding-right: 16.5rem; |
pr-67 | padding-right: 16.75rem; |
pr-68 | padding-right: 17rem; |
pr-69 | padding-right: 17.25rem; |
pr-70 | padding-right: 17.5rem; |
pr-71 | padding-right: 17.75rem; |
pr-72 | padding-right: 18rem; |
pr-73 | padding-right: 18.25rem; |
pr-74 | padding-right: 18.5rem; |
pr-75 | padding-right: 18.75rem; |
pr-76 | padding-right: 19rem; |
pr-77 | padding-right: 19.25rem; |
pr-78 | padding-right: 19.5rem; |
pr-79 | padding-right: 19.75rem; |
pr-80 | padding-right: 20rem; |
pr-81 | padding-right: 20.25rem; |
pr-82 | padding-right: 20.5rem; |
pr-83 | padding-right: 20.75rem; |
pr-84 | padding-right: 21rem; |
pr-85 | padding-right: 21.25rem; |
pr-86 | padding-right: 21.5rem; |
pr-87 | padding-right: 21.75rem; |
pr-88 | padding-right: 22rem; |
pr-89 | padding-right: 22.25rem; |
pr-90 | padding-right: 22.5rem; |
pr-91 | padding-right: 22.75rem; |
pr-92 | padding-right: 23rem; |
pr-93 | padding-right: 23.25rem; |
pr-94 | padding-right: 23.5rem; |
pr-95 | padding-right: 23.75rem; |
pr-96 | padding-right: 24rem; |
pr-97 | padding-right: 24.25rem; |
pr-98 | padding-right: 24.5rem; |
pr-99 | padding-right: 24.75rem; |
pr-100 | padding-right: 25rem; |
pr-auto | padding-right: auto; |
pr-px | padding-right: 1px; |
<div id="area"> <div class="p-8"> <p class="bg-indigo tc-white pr-6">6</p> </div></div>Padding Top
Controls the top padding of an element.
| Class | Style |
|---|---|
pt-0 | padding-top: 0rem; |
pt-1 | padding-top: 0.25rem; |
pt-2 | padding-top: 0.5rem; |
pt-3 | padding-top: 0.75rem; |
pt-4 | padding-top: 1rem; |
pt-5 | padding-top: 1.25rem; |
pt-6 | padding-top: 1.5rem; |
pt-7 | padding-top: 1.75rem; |
pt-8 | padding-top: 2rem; |
pt-9 | padding-top: 2.25rem; |
pt-10 | padding-top: 2.5rem; |
pt-11 | padding-top: 2.75rem; |
pt-12 | padding-top: 3rem; |
pt-13 | padding-top: 3.25rem; |
pt-14 | padding-top: 3.5rem; |
pt-15 | padding-top: 3.75rem; |
pt-16 | padding-top: 4rem; |
pt-17 | padding-top: 4.25rem; |
pt-18 | padding-top: 4.5rem; |
pt-19 | padding-top: 4.75rem; |
pt-20 | padding-top: 5rem; |
pt-21 | padding-top: 5.25rem; |
pt-22 | padding-top: 5.5rem; |
pt-23 | padding-top: 5.75rem; |
pt-24 | padding-top: 6rem; |
pt-25 | padding-top: 6.25rem; |
pt-26 | padding-top: 6.5rem; |
pt-27 | padding-top: 6.75rem; |
pt-28 | padding-top: 7rem; |
pt-29 | padding-top: 7.25rem; |
pt-30 | padding-top: 7.5rem; |
pt-31 | padding-top: 7.75rem; |
pt-32 | padding-top: 8rem; |
pt-33 | padding-top: 8.25rem; |
pt-34 | padding-top: 8.5rem; |
pt-35 | padding-top: 8.75rem; |
pt-36 | padding-top: 9rem; |
pt-37 | padding-top: 9.25rem; |
pt-38 | padding-top: 9.5rem; |
pt-39 | padding-top: 9.75rem; |
pt-40 | padding-top: 10rem; |
pt-41 | padding-top: 10.25rem; |
pt-42 | padding-top: 10.5rem; |
pt-43 | padding-top: 10.75rem; |
pt-44 | padding-top: 11rem; |
pt-45 | padding-top: 11.25rem; |
pt-46 | padding-top: 11.5rem; |
pt-47 | padding-top: 11.75rem; |
pt-48 | padding-top: 12rem; |
pt-49 | padding-top: 12.25rem; |
pt-50 | padding-top: 12.5rem; |
pt-51 | padding-top: 12.75rem; |
pt-52 | padding-top: 13rem; |
pt-53 | padding-top: 13.25rem; |
pt-54 | padding-top: 13.5rem; |
pt-55 | padding-top: 13.75rem; |
pt-56 | padding-top: 14rem; |
pt-57 | padding-top: 14.25rem; |
pt-58 | padding-top: 14.5rem; |
pt-59 | padding-top: 14.75rem; |
pt-60 | padding-top: 15rem; |
pt-61 | padding-top: 15.25rem; |
pt-62 | padding-top: 15.5rem; |
pt-63 | padding-top: 15.75rem; |
pt-64 | padding-top: 16rem; |
pt-65 | padding-top: 16.25rem; |
pt-66 | padding-top: 16.5rem; |
pt-67 | padding-top: 16.75rem; |
pt-68 | padding-top: 17rem; |
pt-69 | padding-top: 17.25rem; |
pt-70 | padding-top: 17.5rem; |
pt-71 | padding-top: 17.75rem; |
pt-72 | padding-top: 18rem; |
pt-73 | padding-top: 18.25rem; |
pt-74 | padding-top: 18.5rem; |
pt-75 | padding-top: 18.75rem; |
pt-76 | padding-top: 19rem; |
pt-77 | padding-top: 19.25rem; |
pt-78 | padding-top: 19.5rem; |
pt-79 | padding-top: 19.75rem; |
pt-80 | padding-top: 20rem; |
pt-81 | padding-top: 20.25rem; |
pt-82 | padding-top: 20.5rem; |
pt-83 | padding-top: 20.75rem; |
pt-84 | padding-top: 21rem; |
pt-85 | padding-top: 21.25rem; |
pt-86 | padding-top: 21.5rem; |
pt-87 | padding-top: 21.75rem; |
pt-88 | padding-top: 22rem; |
pt-89 | padding-top: 22.25rem; |
pt-90 | padding-top: 22.5rem; |
pt-91 | padding-top: 22.75rem; |
pt-92 | padding-top: 23rem; |
pt-93 | padding-top: 23.25rem; |
pt-94 | padding-top: 23.5rem; |
pt-95 | padding-top: 23.75rem; |
pt-96 | padding-top: 24rem; |
pt-97 | padding-top: 24.25rem; |
pt-98 | padding-top: 24.5rem; |
pt-99 | padding-top: 24.75rem; |
pt-100 | padding-top: 25rem; |
pt-auto | padding-top: auto; |
pt-px | padding-top: 1px; |
<div id="area"> <div class="p-8"> <p class="bg-indigo tc-white pt-6">6</p> </div></div>Padding Block End
Controls the logical block end padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.
| Class | Style |
|---|---|
pbe-0 | padding-block-end: 0rem; |
pbe-1 | padding-block-end: 0.25rem; |
pbe-2 | padding-block-end: 0.5rem; |
pbe-3 | padding-block-end: 0.75rem; |
pbe-4 | padding-block-end: 1rem; |
pbe-5 | padding-block-end: 1.25rem; |
pbe-6 | padding-block-end: 1.5rem; |
pbe-7 | padding-block-end: 1.75rem; |
pbe-8 | padding-block-end: 2rem; |
pbe-9 | padding-block-end: 2.25rem; |
pbe-10 | padding-block-end: 2.5rem; |
pbe-11 | padding-block-end: 2.75rem; |
pbe-12 | padding-block-end: 3rem; |
pbe-13 | padding-block-end: 3.25rem; |
pbe-14 | padding-block-end: 3.5rem; |
pbe-15 | padding-block-end: 3.75rem; |
pbe-16 | padding-block-end: 4rem; |
pbe-17 | padding-block-end: 4.25rem; |
pbe-18 | padding-block-end: 4.5rem; |
pbe-19 | padding-block-end: 4.75rem; |
pbe-20 | padding-block-end: 5rem; |
pbe-21 | padding-block-end: 5.25rem; |
pbe-22 | padding-block-end: 5.5rem; |
pbe-23 | padding-block-end: 5.75rem; |
pbe-24 | padding-block-end: 6rem; |
pbe-25 | padding-block-end: 6.25rem; |
pbe-26 | padding-block-end: 6.5rem; |
pbe-27 | padding-block-end: 6.75rem; |
pbe-28 | padding-block-end: 7rem; |
pbe-29 | padding-block-end: 7.25rem; |
pbe-30 | padding-block-end: 7.5rem; |
pbe-31 | padding-block-end: 7.75rem; |
pbe-32 | padding-block-end: 8rem; |
pbe-33 | padding-block-end: 8.25rem; |
pbe-34 | padding-block-end: 8.5rem; |
pbe-35 | padding-block-end: 8.75rem; |
pbe-36 | padding-block-end: 9rem; |
pbe-37 | padding-block-end: 9.25rem; |
pbe-38 | padding-block-end: 9.5rem; |
pbe-39 | padding-block-end: 9.75rem; |
pbe-40 | padding-block-end: 10rem; |
pbe-41 | padding-block-end: 10.25rem; |
pbe-42 | padding-block-end: 10.5rem; |
pbe-43 | padding-block-end: 10.75rem; |
pbe-44 | padding-block-end: 11rem; |
pbe-45 | padding-block-end: 11.25rem; |
pbe-46 | padding-block-end: 11.5rem; |
pbe-47 | padding-block-end: 11.75rem; |
pbe-48 | padding-block-end: 12rem; |
pbe-49 | padding-block-end: 12.25rem; |
pbe-50 | padding-block-end: 12.5rem; |
pbe-51 | padding-block-end: 12.75rem; |
pbe-52 | padding-block-end: 13rem; |
pbe-53 | padding-block-end: 13.25rem; |
pbe-54 | padding-block-end: 13.5rem; |
pbe-55 | padding-block-end: 13.75rem; |
pbe-56 | padding-block-end: 14rem; |
pbe-57 | padding-block-end: 14.25rem; |
pbe-58 | padding-block-end: 14.5rem; |
pbe-59 | padding-block-end: 14.75rem; |
pbe-60 | padding-block-end: 15rem; |
pbe-61 | padding-block-end: 15.25rem; |
pbe-62 | padding-block-end: 15.5rem; |
pbe-63 | padding-block-end: 15.75rem; |
pbe-64 | padding-block-end: 16rem; |
pbe-65 | padding-block-end: 16.25rem; |
pbe-66 | padding-block-end: 16.5rem; |
pbe-67 | padding-block-end: 16.75rem; |
pbe-68 | padding-block-end: 17rem; |
pbe-69 | padding-block-end: 17.25rem; |
pbe-70 | padding-block-end: 17.5rem; |
pbe-71 | padding-block-end: 17.75rem; |
pbe-72 | padding-block-end: 18rem; |
pbe-73 | padding-block-end: 18.25rem; |
pbe-74 | padding-block-end: 18.5rem; |
pbe-75 | padding-block-end: 18.75rem; |
pbe-76 | padding-block-end: 19rem; |
pbe-77 | padding-block-end: 19.25rem; |
pbe-78 | padding-block-end: 19.5rem; |
pbe-79 | padding-block-end: 19.75rem; |
pbe-80 | padding-block-end: 20rem; |
pbe-81 | padding-block-end: 20.25rem; |
pbe-82 | padding-block-end: 20.5rem; |
pbe-83 | padding-block-end: 20.75rem; |
pbe-84 | padding-block-end: 21rem; |
pbe-85 | padding-block-end: 21.25rem; |
pbe-86 | padding-block-end: 21.5rem; |
pbe-87 | padding-block-end: 21.75rem; |
pbe-88 | padding-block-end: 22rem; |
pbe-89 | padding-block-end: 22.25rem; |
pbe-90 | padding-block-end: 22.5rem; |
pbe-91 | padding-block-end: 22.75rem; |
pbe-92 | padding-block-end: 23rem; |
pbe-93 | padding-block-end: 23.25rem; |
pbe-94 | padding-block-end: 23.5rem; |
pbe-95 | padding-block-end: 23.75rem; |
pbe-96 | padding-block-end: 24rem; |
pbe-97 | padding-block-end: 24.25rem; |
pbe-98 | padding-block-end: 24.5rem; |
pbe-99 | padding-block-end: 24.75rem; |
pbe-100 | padding-block-end: 25rem; |
pbe-auto | padding-block-end: auto; |
pbe-px | padding-block-end: 1px; |
<div id="area"> <div class="p-8"> <p class="bg-indigo tc-white pbe-6">6</p> </div></div>Padding Block Start
Controls the logical block start padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.
| Class | Style |
|---|---|
pbs-0 | padding-block-start: 0rem; |
pbs-1 | padding-block-start: 0.25rem; |
pbs-2 | padding-block-start: 0.5rem; |
pbs-3 | padding-block-start: 0.75rem; |
pbs-4 | padding-block-start: 1rem; |
pbs-5 | padding-block-start: 1.25rem; |
pbs-6 | padding-block-start: 1.5rem; |
pbs-7 | padding-block-start: 1.75rem; |
pbs-8 | padding-block-start: 2rem; |
pbs-9 | padding-block-start: 2.25rem; |
pbs-10 | padding-block-start: 2.5rem; |
pbs-11 | padding-block-start: 2.75rem; |
pbs-12 | padding-block-start: 3rem; |
pbs-13 | padding-block-start: 3.25rem; |
pbs-14 | padding-block-start: 3.5rem; |
pbs-15 | padding-block-start: 3.75rem; |
pbs-16 | padding-block-start: 4rem; |
pbs-17 | padding-block-start: 4.25rem; |
pbs-18 | padding-block-start: 4.5rem; |
pbs-19 | padding-block-start: 4.75rem; |
pbs-20 | padding-block-start: 5rem; |
pbs-21 | padding-block-start: 5.25rem; |
pbs-22 | padding-block-start: 5.5rem; |
pbs-23 | padding-block-start: 5.75rem; |
pbs-24 | padding-block-start: 6rem; |
pbs-25 | padding-block-start: 6.25rem; |
pbs-26 | padding-block-start: 6.5rem; |
pbs-27 | padding-block-start: 6.75rem; |
pbs-28 | padding-block-start: 7rem; |
pbs-29 | padding-block-start: 7.25rem; |
pbs-30 | padding-block-start: 7.5rem; |
pbs-31 | padding-block-start: 7.75rem; |
pbs-32 | padding-block-start: 8rem; |
pbs-33 | padding-block-start: 8.25rem; |
pbs-34 | padding-block-start: 8.5rem; |
pbs-35 | padding-block-start: 8.75rem; |
pbs-36 | padding-block-start: 9rem; |
pbs-37 | padding-block-start: 9.25rem; |
pbs-38 | padding-block-start: 9.5rem; |
pbs-39 | padding-block-start: 9.75rem; |
pbs-40 | padding-block-start: 10rem; |
pbs-41 | padding-block-start: 10.25rem; |
pbs-42 | padding-block-start: 10.5rem; |
pbs-43 | padding-block-start: 10.75rem; |
pbs-44 | padding-block-start: 11rem; |
pbs-45 | padding-block-start: 11.25rem; |
pbs-46 | padding-block-start: 11.5rem; |
pbs-47 | padding-block-start: 11.75rem; |
pbs-48 | padding-block-start: 12rem; |
pbs-49 | padding-block-start: 12.25rem; |
pbs-50 | padding-block-start: 12.5rem; |
pbs-51 | padding-block-start: 12.75rem; |
pbs-52 | padding-block-start: 13rem; |
pbs-53 | padding-block-start: 13.25rem; |
pbs-54 | padding-block-start: 13.5rem; |
pbs-55 | padding-block-start: 13.75rem; |
pbs-56 | padding-block-start: 14rem; |
pbs-57 | padding-block-start: 14.25rem; |
pbs-58 | padding-block-start: 14.5rem; |
pbs-59 | padding-block-start: 14.75rem; |
pbs-60 | padding-block-start: 15rem; |
pbs-61 | padding-block-start: 15.25rem; |
pbs-62 | padding-block-start: 15.5rem; |
pbs-63 | padding-block-start: 15.75rem; |
pbs-64 | padding-block-start: 16rem; |
pbs-65 | padding-block-start: 16.25rem; |
pbs-66 | padding-block-start: 16.5rem; |
pbs-67 | padding-block-start: 16.75rem; |
pbs-68 | padding-block-start: 17rem; |
pbs-69 | padding-block-start: 17.25rem; |
pbs-70 | padding-block-start: 17.5rem; |
pbs-71 | padding-block-start: 17.75rem; |
pbs-72 | padding-block-start: 18rem; |
pbs-73 | padding-block-start: 18.25rem; |
pbs-74 | padding-block-start: 18.5rem; |
pbs-75 | padding-block-start: 18.75rem; |
pbs-76 | padding-block-start: 19rem; |
pbs-77 | padding-block-start: 19.25rem; |
pbs-78 | padding-block-start: 19.5rem; |
pbs-79 | padding-block-start: 19.75rem; |
pbs-80 | padding-block-start: 20rem; |
pbs-81 | padding-block-start: 20.25rem; |
pbs-82 | padding-block-start: 20.5rem; |
pbs-83 | padding-block-start: 20.75rem; |
pbs-84 | padding-block-start: 21rem; |
pbs-85 | padding-block-start: 21.25rem; |
pbs-86 | padding-block-start: 21.5rem; |
pbs-87 | padding-block-start: 21.75rem; |
pbs-88 | padding-block-start: 22rem; |
pbs-89 | padding-block-start: 22.25rem; |
pbs-90 | padding-block-start: 22.5rem; |
pbs-91 | padding-block-start: 22.75rem; |
pbs-92 | padding-block-start: 23rem; |
pbs-93 | padding-block-start: 23.25rem; |
pbs-94 | padding-block-start: 23.5rem; |
pbs-95 | padding-block-start: 23.75rem; |
pbs-96 | padding-block-start: 24rem; |
pbs-97 | padding-block-start: 24.25rem; |
pbs-98 | padding-block-start: 24.5rem; |
pbs-99 | padding-block-start: 24.75rem; |
pbs-100 | padding-block-start: 25rem; |
pbs-auto | padding-block-start: auto; |
pbs-px | padding-block-start: 1px; |
<div id="area"> <div class="p-8"> <p class="bg-indigo tc-white pbs-6">6</p> </div></div>Padding Inline End
Controls the logical inline end padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.
| Class | Style |
|---|---|
pie-0 | padding-inline-end: 0rem; |
pie-1 | padding-inline-end: 0.25rem; |
pie-2 | padding-inline-end: 0.5rem; |
pie-3 | padding-inline-end: 0.75rem; |
pie-4 | padding-inline-end: 1rem; |
pie-5 | padding-inline-end: 1.25rem; |
pie-6 | padding-inline-end: 1.5rem; |
pie-7 | padding-inline-end: 1.75rem; |
pie-8 | padding-inline-end: 2rem; |
pie-9 | padding-inline-end: 2.25rem; |
pie-10 | padding-inline-end: 2.5rem; |
pie-11 | padding-inline-end: 2.75rem; |
pie-12 | padding-inline-end: 3rem; |
pie-13 | padding-inline-end: 3.25rem; |
pie-14 | padding-inline-end: 3.5rem; |
pie-15 | padding-inline-end: 3.75rem; |
pie-16 | padding-inline-end: 4rem; |
pie-17 | padding-inline-end: 4.25rem; |
pie-18 | padding-inline-end: 4.5rem; |
pie-19 | padding-inline-end: 4.75rem; |
pie-20 | padding-inline-end: 5rem; |
pie-21 | padding-inline-end: 5.25rem; |
pie-22 | padding-inline-end: 5.5rem; |
pie-23 | padding-inline-end: 5.75rem; |
pie-24 | padding-inline-end: 6rem; |
pie-25 | padding-inline-end: 6.25rem; |
pie-26 | padding-inline-end: 6.5rem; |
pie-27 | padding-inline-end: 6.75rem; |
pie-28 | padding-inline-end: 7rem; |
pie-29 | padding-inline-end: 7.25rem; |
pie-30 | padding-inline-end: 7.5rem; |
pie-31 | padding-inline-end: 7.75rem; |
pie-32 | padding-inline-end: 8rem; |
pie-33 | padding-inline-end: 8.25rem; |
pie-34 | padding-inline-end: 8.5rem; |
pie-35 | padding-inline-end: 8.75rem; |
pie-36 | padding-inline-end: 9rem; |
pie-37 | padding-inline-end: 9.25rem; |
pie-38 | padding-inline-end: 9.5rem; |
pie-39 | padding-inline-end: 9.75rem; |
pie-40 | padding-inline-end: 10rem; |
pie-41 | padding-inline-end: 10.25rem; |
pie-42 | padding-inline-end: 10.5rem; |
pie-43 | padding-inline-end: 10.75rem; |
pie-44 | padding-inline-end: 11rem; |
pie-45 | padding-inline-end: 11.25rem; |
pie-46 | padding-inline-end: 11.5rem; |
pie-47 | padding-inline-end: 11.75rem; |
pie-48 | padding-inline-end: 12rem; |
pie-49 | padding-inline-end: 12.25rem; |
pie-50 | padding-inline-end: 12.5rem; |
pie-51 | padding-inline-end: 12.75rem; |
pie-52 | padding-inline-end: 13rem; |
pie-53 | padding-inline-end: 13.25rem; |
pie-54 | padding-inline-end: 13.5rem; |
pie-55 | padding-inline-end: 13.75rem; |
pie-56 | padding-inline-end: 14rem; |
pie-57 | padding-inline-end: 14.25rem; |
pie-58 | padding-inline-end: 14.5rem; |
pie-59 | padding-inline-end: 14.75rem; |
pie-60 | padding-inline-end: 15rem; |
pie-61 | padding-inline-end: 15.25rem; |
pie-62 | padding-inline-end: 15.5rem; |
pie-63 | padding-inline-end: 15.75rem; |
pie-64 | padding-inline-end: 16rem; |
pie-65 | padding-inline-end: 16.25rem; |
pie-66 | padding-inline-end: 16.5rem; |
pie-67 | padding-inline-end: 16.75rem; |
pie-68 | padding-inline-end: 17rem; |
pie-69 | padding-inline-end: 17.25rem; |
pie-70 | padding-inline-end: 17.5rem; |
pie-71 | padding-inline-end: 17.75rem; |
pie-72 | padding-inline-end: 18rem; |
pie-73 | padding-inline-end: 18.25rem; |
pie-74 | padding-inline-end: 18.5rem; |
pie-75 | padding-inline-end: 18.75rem; |
pie-76 | padding-inline-end: 19rem; |
pie-77 | padding-inline-end: 19.25rem; |
pie-78 | padding-inline-end: 19.5rem; |
pie-79 | padding-inline-end: 19.75rem; |
pie-80 | padding-inline-end: 20rem; |
pie-81 | padding-inline-end: 20.25rem; |
pie-82 | padding-inline-end: 20.5rem; |
pie-83 | padding-inline-end: 20.75rem; |
pie-84 | padding-inline-end: 21rem; |
pie-85 | padding-inline-end: 21.25rem; |
pie-86 | padding-inline-end: 21.5rem; |
pie-87 | padding-inline-end: 21.75rem; |
pie-88 | padding-inline-end: 22rem; |
pie-89 | padding-inline-end: 22.25rem; |
pie-90 | padding-inline-end: 22.5rem; |
pie-91 | padding-inline-end: 22.75rem; |
pie-92 | padding-inline-end: 23rem; |
pie-93 | padding-inline-end: 23.25rem; |
pie-94 | padding-inline-end: 23.5rem; |
pie-95 | padding-inline-end: 23.75rem; |
pie-96 | padding-inline-end: 24rem; |
pie-97 | padding-inline-end: 24.25rem; |
pie-98 | padding-inline-end: 24.5rem; |
pie-99 | padding-inline-end: 24.75rem; |
pie-100 | padding-inline-end: 25rem; |
pie-auto | padding-inline-end: auto; |
pie-px | padding-inline-end: 1px; |
<div id="area"> <div class="p-8"> <p class="bg-indigo tc-white pie-6">6</p> </div></div>Padding Inline Start
Controls the logical inline start padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.
| Class | Style |
|---|---|
pis-0 | padding-inline-start: 0rem; |
pis-1 | padding-inline-start: 0.25rem; |
pis-2 | padding-inline-start: 0.5rem; |
pis-3 | padding-inline-start: 0.75rem; |
pis-4 | padding-inline-start: 1rem; |
pis-5 | padding-inline-start: 1.25rem; |
pis-6 | padding-inline-start: 1.5rem; |
pis-7 | padding-inline-start: 1.75rem; |
pis-8 | padding-inline-start: 2rem; |
pis-9 | padding-inline-start: 2.25rem; |
pis-10 | padding-inline-start: 2.5rem; |
pis-11 | padding-inline-start: 2.75rem; |
pis-12 | padding-inline-start: 3rem; |
pis-13 | padding-inline-start: 3.25rem; |
pis-14 | padding-inline-start: 3.5rem; |
pis-15 | padding-inline-start: 3.75rem; |
pis-16 | padding-inline-start: 4rem; |
pis-17 | padding-inline-start: 4.25rem; |
pis-18 | padding-inline-start: 4.5rem; |
pis-19 | padding-inline-start: 4.75rem; |
pis-20 | padding-inline-start: 5rem; |
pis-21 | padding-inline-start: 5.25rem; |
pis-22 | padding-inline-start: 5.5rem; |
pis-23 | padding-inline-start: 5.75rem; |
pis-24 | padding-inline-start: 6rem; |
pis-25 | padding-inline-start: 6.25rem; |
pis-26 | padding-inline-start: 6.5rem; |
pis-27 | padding-inline-start: 6.75rem; |
pis-28 | padding-inline-start: 7rem; |
pis-29 | padding-inline-start: 7.25rem; |
pis-30 | padding-inline-start: 7.5rem; |
pis-31 | padding-inline-start: 7.75rem; |
pis-32 | padding-inline-start: 8rem; |
pis-33 | padding-inline-start: 8.25rem; |
pis-34 | padding-inline-start: 8.5rem; |
pis-35 | padding-inline-start: 8.75rem; |
pis-36 | padding-inline-start: 9rem; |
pis-37 | padding-inline-start: 9.25rem; |
pis-38 | padding-inline-start: 9.5rem; |
pis-39 | padding-inline-start: 9.75rem; |
pis-40 | padding-inline-start: 10rem; |
pis-41 | padding-inline-start: 10.25rem; |
pis-42 | padding-inline-start: 10.5rem; |
pis-43 | padding-inline-start: 10.75rem; |
pis-44 | padding-inline-start: 11rem; |
pis-45 | padding-inline-start: 11.25rem; |
pis-46 | padding-inline-start: 11.5rem; |
pis-47 | padding-inline-start: 11.75rem; |
pis-48 | padding-inline-start: 12rem; |
pis-49 | padding-inline-start: 12.25rem; |
pis-50 | padding-inline-start: 12.5rem; |
pis-51 | padding-inline-start: 12.75rem; |
pis-52 | padding-inline-start: 13rem; |
pis-53 | padding-inline-start: 13.25rem; |
pis-54 | padding-inline-start: 13.5rem; |
pis-55 | padding-inline-start: 13.75rem; |
pis-56 | padding-inline-start: 14rem; |
pis-57 | padding-inline-start: 14.25rem; |
pis-58 | padding-inline-start: 14.5rem; |
pis-59 | padding-inline-start: 14.75rem; |
pis-60 | padding-inline-start: 15rem; |
pis-61 | padding-inline-start: 15.25rem; |
pis-62 | padding-inline-start: 15.5rem; |
pis-63 | padding-inline-start: 15.75rem; |
pis-64 | padding-inline-start: 16rem; |
pis-65 | padding-inline-start: 16.25rem; |
pis-66 | padding-inline-start: 16.5rem; |
pis-67 | padding-inline-start: 16.75rem; |
pis-68 | padding-inline-start: 17rem; |
pis-69 | padding-inline-start: 17.25rem; |
pis-70 | padding-inline-start: 17.5rem; |
pis-71 | padding-inline-start: 17.75rem; |
pis-72 | padding-inline-start: 18rem; |
pis-73 | padding-inline-start: 18.25rem; |
pis-74 | padding-inline-start: 18.5rem; |
pis-75 | padding-inline-start: 18.75rem; |
pis-76 | padding-inline-start: 19rem; |
pis-77 | padding-inline-start: 19.25rem; |
pis-78 | padding-inline-start: 19.5rem; |
pis-79 | padding-inline-start: 19.75rem; |
pis-80 | padding-inline-start: 20rem; |
pis-81 | padding-inline-start: 20.25rem; |
pis-82 | padding-inline-start: 20.5rem; |
pis-83 | padding-inline-start: 20.75rem; |
pis-84 | padding-inline-start: 21rem; |
pis-85 | padding-inline-start: 21.25rem; |
pis-86 | padding-inline-start: 21.5rem; |
pis-87 | padding-inline-start: 21.75rem; |
pis-88 | padding-inline-start: 22rem; |
pis-89 | padding-inline-start: 22.25rem; |
pis-90 | padding-inline-start: 22.5rem; |
pis-91 | padding-inline-start: 22.75rem; |
pis-92 | padding-inline-start: 23rem; |
pis-93 | padding-inline-start: 23.25rem; |
pis-94 | padding-inline-start: 23.5rem; |
pis-95 | padding-inline-start: 23.75rem; |
pis-96 | padding-inline-start: 24rem; |
pis-97 | padding-inline-start: 24.25rem; |
pis-98 | padding-inline-start: 24.5rem; |
pis-99 | padding-inline-start: 24.75rem; |
pis-100 | padding-inline-start: 25rem; |
pis-auto | padding-inline-start: auto; |
pis-px | padding-inline-start: 1px; |
<div id="area"> <div class="p-8"> <p class="bg-indigo tc-white pis-6">6</p> </div></div>Padding X
Controls the left and right paddings of an element at once.
| Class | Style |
|---|---|
px-0 | padding-left: 0rem; |
px-1 | padding-left: 0.25rem; |
px-2 | padding-left: 0.5rem; |
px-3 | padding-left: 0.75rem; |
px-4 | padding-left: 1rem; |
px-5 | padding-left: 1.25rem; |
px-6 | padding-left: 1.5rem; |
px-7 | padding-left: 1.75rem; |
px-8 | padding-left: 2rem; |
px-9 | padding-left: 2.25rem; |
px-10 | padding-left: 2.5rem; |
px-11 | padding-left: 2.75rem; |
px-12 | padding-left: 3rem; |
px-13 | padding-left: 3.25rem; |
px-14 | padding-left: 3.5rem; |
px-15 | padding-left: 3.75rem; |
px-16 | padding-left: 4rem; |
px-17 | padding-left: 4.25rem; |
px-18 | padding-left: 4.5rem; |
px-19 | padding-left: 4.75rem; |
px-20 | padding-left: 5rem; |
px-21 | padding-left: 5.25rem; |
px-22 | padding-left: 5.5rem; |
px-23 | padding-left: 5.75rem; |
px-24 | padding-left: 6rem; |
px-25 | padding-left: 6.25rem; |
px-26 | padding-left: 6.5rem; |
px-27 | padding-left: 6.75rem; |
px-28 | padding-left: 7rem; |
px-29 | padding-left: 7.25rem; |
px-30 | padding-left: 7.5rem; |
px-31 | padding-left: 7.75rem; |
px-32 | padding-left: 8rem; |
px-33 | padding-left: 8.25rem; |
px-34 | padding-left: 8.5rem; |
px-35 | padding-left: 8.75rem; |
px-36 | padding-left: 9rem; |
px-37 | padding-left: 9.25rem; |
px-38 | padding-left: 9.5rem; |
px-39 | padding-left: 9.75rem; |
px-40 | padding-left: 10rem; |
px-41 | padding-left: 10.25rem; |
px-42 | padding-left: 10.5rem; |
px-43 | padding-left: 10.75rem; |
px-44 | padding-left: 11rem; |
px-45 | padding-left: 11.25rem; |
px-46 | padding-left: 11.5rem; |
px-47 | padding-left: 11.75rem; |
px-48 | padding-left: 12rem; |
px-49 | padding-left: 12.25rem; |
px-50 | padding-left: 12.5rem; |
px-51 | padding-left: 12.75rem; |
px-52 | padding-left: 13rem; |
px-53 | padding-left: 13.25rem; |
px-54 | padding-left: 13.5rem; |
px-55 | padding-left: 13.75rem; |
px-56 | padding-left: 14rem; |
px-57 | padding-left: 14.25rem; |
px-58 | padding-left: 14.5rem; |
px-59 | padding-left: 14.75rem; |
px-60 | padding-left: 15rem; |
px-61 | padding-left: 15.25rem; |
px-62 | padding-left: 15.5rem; |
px-63 | padding-left: 15.75rem; |
px-64 | padding-left: 16rem; |
px-65 | padding-left: 16.25rem; |
px-66 | padding-left: 16.5rem; |
px-67 | padding-left: 16.75rem; |
px-68 | padding-left: 17rem; |
px-69 | padding-left: 17.25rem; |
px-70 | padding-left: 17.5rem; |
px-71 | padding-left: 17.75rem; |
px-72 | padding-left: 18rem; |
px-73 | padding-left: 18.25rem; |
px-74 | padding-left: 18.5rem; |
px-75 | padding-left: 18.75rem; |
px-76 | padding-left: 19rem; |
px-77 | padding-left: 19.25rem; |
px-78 | padding-left: 19.5rem; |
px-79 | padding-left: 19.75rem; |
px-80 | padding-left: 20rem; |
px-81 | padding-left: 20.25rem; |
px-82 | padding-left: 20.5rem; |
px-83 | padding-left: 20.75rem; |
px-84 | padding-left: 21rem; |
px-85 | padding-left: 21.25rem; |
px-86 | padding-left: 21.5rem; |
px-87 | padding-left: 21.75rem; |
px-88 | padding-left: 22rem; |
px-89 | padding-left: 22.25rem; |
px-90 | padding-left: 22.5rem; |
px-91 | padding-left: 22.75rem; |
px-92 | padding-left: 23rem; |
px-93 | padding-left: 23.25rem; |
px-94 | padding-left: 23.5rem; |
px-95 | padding-left: 23.75rem; |
px-96 | padding-left: 24rem; |
px-97 | padding-left: 24.25rem; |
px-98 | padding-left: 24.5rem; |
px-99 | padding-left: 24.75rem; |
px-100 | padding-left: 25rem; |
px-auto | padding-left: auto; |
px-px | padding-left: 1px; |
<div id="area"> <div class="p-8"> <p class="bg-indigo tc-white px-6">6</p> </div></div>Padding Y
Controls the bottom and top paddings of an element at once.
| Class | Style |
|---|---|
py-0 | padding-top: 0rem; |
py-1 | padding-top: 0.25rem; |
py-2 | padding-top: 0.5rem; |
py-3 | padding-top: 0.75rem; |
py-4 | padding-top: 1rem; |
py-5 | padding-top: 1.25rem; |
py-6 | padding-top: 1.5rem; |
py-7 | padding-top: 1.75rem; |
py-8 | padding-top: 2rem; |
py-9 | padding-top: 2.25rem; |
py-10 | padding-top: 2.5rem; |
py-11 | padding-top: 2.75rem; |
py-12 | padding-top: 3rem; |
py-13 | padding-top: 3.25rem; |
py-14 | padding-top: 3.5rem; |
py-15 | padding-top: 3.75rem; |
py-16 | padding-top: 4rem; |
py-17 | padding-top: 4.25rem; |
py-18 | padding-top: 4.5rem; |
py-19 | padding-top: 4.75rem; |
py-20 | padding-top: 5rem; |
py-21 | padding-top: 5.25rem; |
py-22 | padding-top: 5.5rem; |
py-23 | padding-top: 5.75rem; |
py-24 | padding-top: 6rem; |
py-25 | padding-top: 6.25rem; |
py-26 | padding-top: 6.5rem; |
py-27 | padding-top: 6.75rem; |
py-28 | padding-top: 7rem; |
py-29 | padding-top: 7.25rem; |
py-30 | padding-top: 7.5rem; |
py-31 | padding-top: 7.75rem; |
py-32 | padding-top: 8rem; |
py-33 | padding-top: 8.25rem; |
py-34 | padding-top: 8.5rem; |
py-35 | padding-top: 8.75rem; |
py-36 | padding-top: 9rem; |
py-37 | padding-top: 9.25rem; |
py-38 | padding-top: 9.5rem; |
py-39 | padding-top: 9.75rem; |
py-40 | padding-top: 10rem; |
py-41 | padding-top: 10.25rem; |
py-42 | padding-top: 10.5rem; |
py-43 | padding-top: 10.75rem; |
py-44 | padding-top: 11rem; |
py-45 | padding-top: 11.25rem; |
py-46 | padding-top: 11.5rem; |
py-47 | padding-top: 11.75rem; |
py-48 | padding-top: 12rem; |
py-49 | padding-top: 12.25rem; |
py-50 | padding-top: 12.5rem; |
py-51 | padding-top: 12.75rem; |
py-52 | padding-top: 13rem; |
py-53 | padding-top: 13.25rem; |
py-54 | padding-top: 13.5rem; |
py-55 | padding-top: 13.75rem; |
py-56 | padding-top: 14rem; |
py-57 | padding-top: 14.25rem; |
py-58 | padding-top: 14.5rem; |
py-59 | padding-top: 14.75rem; |
py-60 | padding-top: 15rem; |
py-61 | padding-top: 15.25rem; |
py-62 | padding-top: 15.5rem; |
py-63 | padding-top: 15.75rem; |
py-64 | padding-top: 16rem; |
py-65 | padding-top: 16.25rem; |
py-66 | padding-top: 16.5rem; |
py-67 | padding-top: 16.75rem; |
py-68 | padding-top: 17rem; |
py-69 | padding-top: 17.25rem; |
py-70 | padding-top: 17.5rem; |
py-71 | padding-top: 17.75rem; |
py-72 | padding-top: 18rem; |
py-73 | padding-top: 18.25rem; |
py-74 | padding-top: 18.5rem; |
py-75 | padding-top: 18.75rem; |
py-76 | padding-top: 19rem; |
py-77 | padding-top: 19.25rem; |
py-78 | padding-top: 19.5rem; |
py-79 | padding-top: 19.75rem; |
py-80 | padding-top: 20rem; |
py-81 | padding-top: 20.25rem; |
py-82 | padding-top: 20.5rem; |
py-83 | padding-top: 20.75rem; |
py-84 | padding-top: 21rem; |
py-85 | padding-top: 21.25rem; |
py-86 | padding-top: 21.5rem; |
py-87 | padding-top: 21.75rem; |
py-88 | padding-top: 22rem; |
py-89 | padding-top: 22.25rem; |
py-90 | padding-top: 22.5rem; |
py-91 | padding-top: 22.75rem; |
py-92 | padding-top: 23rem; |
py-93 | padding-top: 23.25rem; |
py-94 | padding-top: 23.5rem; |
py-95 | padding-top: 23.75rem; |
py-96 | padding-top: 24rem; |
py-97 | padding-top: 24.25rem; |
py-98 | padding-top: 24.5rem; |
py-99 | padding-top: 24.75rem; |
py-100 | padding-top: 25rem; |
py-auto | padding-top: auto; |
py-px | padding-top: 1px; |
<div id="area"> <div class="p-8"> <p class="bg-indigo tc-white py-6">6</p> </div></div>Using utility variants
Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.
Using media queries
You can combine responsive breakpoints like sm:p-*, md:p-*, lg:p-*, and xxl:p-* to allow targeting specific utilities in different viewports.
Using hover states
Alternatively, you can apply :hover by using h:p-* utility to override elements and change their values when hovering over them.