Padding
Controls the padding of an element.
| Utility | Properties |
|---|---|
| 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;
|
This example sets the padding to 2rem. The element will have uniform padding inside it.
6
<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.
| Utility | Properties |
|---|---|
| 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;
|
This example sets the bottom padding to 2rem. The element will have space inside it at the bottom.
6
<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.
| Utility | Properties |
|---|---|
| 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;
|
This example sets the left padding to 2rem. The element will have space inside it on the left side.
6
<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.
| Utility | Properties |
|---|---|
| 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;
|
This example sets the right padding to 2rem. The element will have space inside it on the right side.
6
<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.
| Utility | Properties |
|---|---|
| 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;
|
This example sets the top padding to 2rem. The element will have space inside it at the top.
6
<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.
| Utility | Properties |
|---|---|
| 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;
|
This example sets the bottom padding to 2rem. The element will have space inside it at the bottom in a vertical writing mode.
6
<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.
| Utility | Properties |
|---|---|
| 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;
|
This example sets the top padding to 2rem. The element will have space inside it at the top in a vertical writing mode.
6
<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.
| Utility | Properties |
|---|---|
| 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;
|
This example sets the right padding to 2rem. The element will have space inside it on the right side in a horizontal writing mode.
6
<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.
| Utility | Properties |
|---|---|
| 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;
|
This example sets the left padding to 2rem. The element will have space inside it on the left side in a horizontal writing mode.
6
<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.
| Utility | Properties |
|---|---|
| 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;
|
This example sets the left and right padding to 2rem. The element will have uniform space on both sides inside it.
6
<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.
| Utility | Properties |
|---|---|
| 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;
|
This example sets the bottom and top to 2rem. The element will have uniform space above and below its content.
6
<div id="area"> <div class="p-8"> <p class="bg-indigo tc-white py-6">6</p> </div></div>Conditional styles
Learn how to override existing utilities based on the user’s screen size or other factors, such as hover states.
Breakpoint variant
You can combine responsive breakpoints like sm:p-*,md:p-*, lg:p-*, and xxl:p-* allows targeting specific utilities in different viewports.
<div class="p-1 md:p-2 ..."></div>Hover variant
Alternatively, you can apply :hover by using h:p-* utility to override elements and change their values when hovering over them.
<div class="p-1 h:p-2 ..."></div>