Vue3整合Tailwindcss之padding样式类

04 常用底子样式

padding 样式类

什么是内边距

底子样式

ClassPropertiesp-0padding: 0px;px-0padding-left: 0px; padding-right: 0px;py-0padding-top: 0px; padding-bottom: 0px;ps-0padding-inline-start: 0px;pe-0padding-inline-end: 0px;pt-0padding-top: 0px;pr-0padding-right: 0px;pb-0padding-bottom: 0px;pl-0padding-left: 0px;p-pxpadding: 1px;px-pxpadding-left: 1px; padding-right: 1px;py-pxpadding-top: 1px; padding-bottom: 1px;ps-pxpadding-inline-start: 1px;pe-pxpadding-inline-end: 1px;pt-pxpadding-top: 1px;pr-pxpadding-right: 1px;pb-pxpadding-bottom: 1px;pl-pxpadding-left: 1px;p-0.5padding: 0.125rem; /* 2px */px-0.5padding-left: 0.125rem; /* 2px / padding-right: 0.125rem; / 2px */py-0.5padding-top: 0.125rem; /* 2px / padding-bottom: 0.125rem; / 2px */ps-0.5padding-inline-start: 0.125rem; /* 2px */pe-0.5padding-inline-end: 0.125rem; /* 2px */pt-0.5padding-top: 0.125rem; /* 2px */pr-0.5padding-right: 0.125rem; /* 2px */pb-0.5padding-bottom: 0.125rem; /* 2px */pl-0.5padding-left: 0.125rem; /* 2px */p-1padding: 0.25rem; /* 4px */px-1padding-left: 0.25rem; /* 4px / padding-right: 0.25rem; / 4px */py-1padding-top: 0.25rem; /* 4px / padding-bottom: 0.25rem; / 4px */ps-1padding-inline-start: 0.25rem; /* 4px */pe-1padding-inline-end: 0.25rem; /* 4px */pt-1padding-top: 0.25rem; /* 4px */pr-1padding-right: 0.25rem; /* 4px */pb-1padding-bottom: 0.25rem; /* 4px */pl-1padding-left: 0.25rem; /* 4px */p-1.5padding: 0.375rem; /* 6px */px-1.5padding-left: 0.375rem; /* 6px / padding-right: 0.375rem; / 6px */py-1.5padding-top: 0.375rem; /* 6px / padding-bottom: 0.375rem; / 6px */ps-1.5padding-inline-start: 0.375rem; /* 6px */pe-1.5padding-inline-end: 0.375rem; /* 6px */pt-1.5padding-top: 0.375rem; /* 6px */pr-1.5padding-right: 0.375rem; /* 6px */pb-1.5padding-bottom: 0.375rem; /* 6px */pl-1.5padding-left: 0.375rem; /* 6px */p-2padding: 0.5rem; /* 8px */px-2padding-left: 0.5rem; /* 8px / padding-right: 0.5rem; / 8px */py-2padding-top: 0.5rem; /* 8px / padding-bottom: 0.5rem; / 8px */ps-2padding-inline-start: 0.5rem; /* 8px */pe-2padding-inline-end: 0.5rem; /* 8px */pt-2padding-top: 0.5rem; /* 8px */pr-2padding-right: 0.5rem; /* 8px */pb-2padding-bottom: 0.5rem; /* 8px */pl-2padding-left: 0.5rem; /* 8px */p-2.5padding: 0.625rem; /* 10px */px-2.5padding-left: 0.625rem; /* 10px / padding-right: 0.625rem; / 10px */py-2.5padding-top: 0.625rem; /* 10px / padding-bottom: 0.625rem; / 10px */ps-2.5padding-inline-start: 0.625rem; /* 10px */pe-2.5padding-inline-end: 0.625rem; /* 10px */pt-2.5padding-top: 0.625rem; /* 10px */pr-2.5padding-right: 0.625rem; /* 10px */pb-2.5padding-bottom: 0.625rem; /* 10px */pl-2.5padding-left: 0.625rem; /* 10px */p-3padding: 0.75rem; /* 12px */px-3padding-left: 0.75rem; /* 12px / padding-right: 0.75rem; / 12px */py-3padding-top: 0.75rem; /* 12px / padding-bottom: 0.75rem; / 12px */ps-3padding-inline-start: 0.75rem; /* 12px */pe-3padding-inline-end: 0.75rem; /* 12px */pt-3padding-top: 0.75rem; /* 12px */pr-3padding-right: 0.75rem; /* 12px */pb-3padding-bottom: 0.75rem; /* 12px */pl-3padding-left: 0.75rem; /* 12px */p-3.5padding: 0.875rem; /* 14px */px-3.5padding-left: 0.875rem; /* 14px / padding-right: 0.875rem; / 14px */py-3.5padding-top: 0.875rem; /* 14px / padding-bottom: 0.875rem; / 14px */ps-3.5padding-inline-start: 0.875rem; /* 14px */pe-3.5padding-inline-end: 0.875rem; /* 14px */pt-3.5padding-top: 0.875rem; /* 14px */pr-3.5padding-right: 0.875rem; /* 14px */pb-3.5padding-bottom: 0.875rem; /* 14px */pl-3.5padding-left: 0.875rem; /* 14px */p-4padding: 1rem; /* 16px */px-4padding-left: 1rem; /* 16px / padding-right: 1rem; / 16px */py-4padding-top: 1rem; /* 16px / padding-bottom: 1rem; / 16px */ps-4padding-inline-start: 1rem; /* 16px */pe-4padding-inline-end: 1rem; /* 16px */pt-4padding-top: 1rem; /* 16px */pr-4padding-right: 1rem; /* 16px */pb-4padding-bottom: 1rem; /* 16px */pl-4padding-left: 1rem; /* 16px */p-5padding: 1.25rem; /* 20px */px-5padding-left: 1.25rem; /* 20px / padding-right: 1.25rem; / 20px */py-5padding-top: 1.25rem; /* 20px / padding-bottom: 1.25rem; / 20px */ps-5padding-inline-start: 1.25rem; /* 20px */pe-5padding-inline-end: 1.25rem; /* 20px */pt-5padding-top: 1.25rem; /* 20px */pr-5padding-right: 1.25rem; /* 20px */pb-5padding-bottom: 1.25rem; /* 20px */pl-5padding-left: 1.25rem; /* 20px */p-6padding: 1.5rem; /* 24px */px-6padding-left: 1.5rem; /* 24px / padding-right: 1.5rem; / 24px */py-6padding-top: 1.5rem; /* 24px / padding-bottom: 1.5rem; / 24px */ps-6padding-inline-start: 1.5rem; /* 24px */pe-6padding-inline-end: 1.5rem; /* 24px */pt-6padding-top: 1.5rem; /* 24px */pr-6padding-right: 1.5rem; /* 24px */pb-6padding-bottom: 1.5rem; /* 24px */pl-6padding-left: 1.5rem; /* 24px */p-7padding: 1.75rem; /* 28px */px-7padding-left: 1.75rem; /* 28px / padding-right: 1.75rem; / 28px */py-7padding-top: 1.75rem; /* 28px / padding-bottom: 1.75rem; / 28px */ps-7padding-inline-start: 1.75rem; /* 28px */pe-7padding-inline-end: 1.75rem; /* 28px */pt-7padding-top: 1.75rem; /* 28px */pr-7padding-right: 1.75rem; /* 28px */pb-7padding-bottom: 1.75rem; /* 28px */pl-7padding-left: 1.75rem; /* 28px */p-8padding: 2rem; /* 32px */px-8padding-left: 2rem; /* 32px / padding-right: 2rem; / 32px */py-8padding-top: 2rem; /* 32px / padding-bottom: 2rem; / 32px */ps-8padding-inline-start: 2rem; /* 32px */pe-8padding-inline-end: 2rem; /* 32px */pt-8padding-top: 2rem; /* 32px */pr-8padding-right: 2rem; /* 32px */pb-8padding-bottom: 2rem; /* 32px */pl-8padding-left: 2rem; /* 32px */p-9padding: 2.25rem; /* 36px */px-9padding-left: 2.25rem; /* 36px / padding-right: 2.25rem; / 36px */py-9padding-top: 2.25rem; /* 36px / padding-bottom: 2.25rem; / 36px */ps-9padding-inline-start: 2.25rem; /* 36px */pe-9padding-inline-end: 2.25rem; /* 36px */pt-9padding-top: 2.25rem; /* 36px */pr-9padding-right: 2.25rem; /* 36px */pb-9padding-bottom: 2.25rem; /* 36px */pl-9padding-left: 2.25rem; /* 36px */p-10padding: 2.5rem; /* 40px */px-10padding-left: 2.5rem; /* 40px / padding-right: 2.5rem; / 40px */py-10padding-top: 2.5rem; /* 40px / padding-bottom: 2.5rem; / 40px */ps-10padding-inline-start: 2.5rem; /* 40px */pe-10padding-inline-end: 2.5rem; /* 40px */pt-10padding-top: 2.5rem; /* 40px */pr-10padding-right: 2.5rem; /* 40px */pb-10padding-bottom: 2.5rem; /* 40px */pl-10padding-left: 2.5rem; /* 40px */p-11padding: 2.75rem; /* 44px */px-11padding-left: 2.75rem; /* 44px / padding-right: 2.75rem; / 44px */py-11padding-top: 2.75rem; /* 44px / padding-bottom: 2.75rem; / 44px */ps-11padding-inline-start: 2.75rem; /* 44px */pe-11padding-inline-end: 2.75rem; /* 44px */pt-11padding-top: 2.75rem; /* 44px */pr-11padding-right: 2.75rem; /* 44px */pb-11padding-bottom: 2.75rem; /* 44px */pl-11padding-left: 2.75rem; /* 44px */p-12padding: 3rem; /* 48px */px-12padding-left: 3rem; /* 48px / padding-right: 3rem; / 48px */py-12padding-top: 3rem; /* 48px / padding-bottom: 3rem; / 48px */ps-12padding-inline-start: 3rem; /* 48px */pe-12padding-inline-end: 3rem; /* 48px */pt-12padding-top: 3rem; /* 48px */pr-12padding-right: 3rem; /* 48px */pb-12padding-bottom: 3rem; /* 48px */pl-12padding-left: 3rem; /* 48px */p-14padding: 3.5rem; /* 56px */px-14padding-left: 3.5rem; /* 56px / padding-right: 3.5rem; / 56px */py-14padding-top: 3.5rem; /* 56px / padding-bottom: 3.5rem; / 56px */ps-14padding-inline-start: 3.5rem; /* 56px */pe-14padding-inline-end: 3.5rem; /* 56px */pt-14padding-top: 3.5rem; /* 56px */pr-14padding-right: 3.5rem; /* 56px */pb-14padding-bottom: 3.5rem; /* 56px */pl-14padding-left: 3.5rem; /* 56px */p-16padding: 4rem; /* 64px */px-16padding-left: 4rem; /* 64px / padding-right: 4rem; / 64px */py-16padding-top: 4rem; /* 64px / padding-bottom: 4rem; / 64px */ps-16padding-inline-start: 4rem; /* 64px */pe-16padding-inline-end: 4rem; /* 64px */pt-16padding-top: 4rem; /* 64px */pr-16padding-right: 4rem; /* 64px */pb-16padding-bottom: 4rem; /* 64px */pl-16padding-left: 4rem; /* 64px */p-20padding: 5rem; /* 80px */px-20padding-left: 5rem; /* 80px / padding-right: 5rem; / 80px */py-20padding-top: 5rem; /* 80px / padding-bottom: 5rem; / 80px */ps-20padding-inline-start: 5rem; /* 80px */pe-20padding-inline-end: 5rem; /* 80px */pt-20padding-top: 5rem; /* 80px */pr-20padding-right: 5rem; /* 80px */pb-20padding-bottom: 5rem; /* 80px */pl-20padding-left: 5rem; /* 80px */p-24padding: 6rem; /* 96px */px-24padding-left: 6rem; /* 96px / padding-right: 6rem; / 96px */py-24padding-top: 6rem; /* 96px / padding-bottom: 6rem; / 96px */ps-24padding-inline-start: 6rem; /* 96px */pe-24padding-inline-end: 6rem; /* 96px */pt-24padding-top: 6rem; /* 96px */pr-24padding-right: 6rem; /* 96px */pb-24padding-bottom: 6rem; /* 96px */pl-24padding-left: 6rem; /* 96px */p-28padding: 7rem; /* 112px */px-28padding-left: 7rem; /* 112px / padding-right: 7rem; / 112px */py-28padding-top: 7rem; /* 112px / padding-bottom: 7rem; / 112px */ps-28padding-inline-start: 7rem; /* 112px */pe-28padding-inline-end: 7rem; /* 112px */pt-28padding-top: 7rem; /* 112px */pr-28padding-right: 7rem; /* 112px */pb-28padding-bottom: 7rem; /* 112px */pl-28padding-left: 7rem; /* 112px */p-32padding: 8rem; /* 128px */px-32padding-left: 8rem; /* 128px / padding-right: 8rem; / 128px */py-32padding-top: 8rem; /* 128px / padding-bottom: 8rem; / 128px */ps-32padding-inline-start: 8rem; /* 128px */pe-32padding-inline-end: 8rem; /* 128px */pt-32padding-top: 8rem; /* 128px */pr-32padding-right: 8rem; /* 128px */pb-32padding-bottom: 8rem; /* 128px */pl-32padding-left: 8rem; /* 128px */p-36padding: 9rem; /* 144px */px-36padding-left: 9rem; /* 144px / padding-right: 9rem; / 144px */py-36padding-top: 9rem; /* 144px / padding-bottom: 9rem; / 144px */ps-36padding-inline-start: 9rem; /* 144px */pe-36padding-inline-end: 9rem; /* 144px */pt-36padding-top: 9rem; /* 144px */pr-36padding-right: 9rem; /* 144px */pb-36padding-bottom: 9rem; /* 144px */pl-36padding-left: 9rem; /* 144px */p-40padding: 10rem; /* 160px */px-40padding-left: 10rem; /* 160px / padding-right: 10rem; / 160px */py-40padding-top: 10rem; /* 160px / padding-bottom: 10rem; / 160px */ps-40padding-inline-start: 10rem; /* 160px */pe-40padding-inline-end: 10rem; /* 160px */pt-40padding-top: 10rem; /* 160px */pr-40padding-right: 10rem; /* 160px */pb-40padding-bottom: 10rem; /* 160px */pl-40padding-left: 10rem; /* 160px */p-44padding: 11rem; /* 176px */px-44padding-left: 11rem; /* 176px / padding-right: 11rem; / 176px */py-44padding-top: 11rem; /* 176px / padding-bottom: 11rem; / 176px */ps-44padding-inline-start: 11rem; /* 176px */pe-44padding-inline-end: 11rem; /* 176px */pt-44padding-top: 11rem; /* 176px */pr-44padding-right: 11rem; /* 176px */pb-44padding-bottom: 11rem; /* 176px */pl-44padding-left: 11rem; /* 176px */p-48padding: 12rem; /* 192px */px-48padding-left: 12rem; /* 192px / padding-right: 12rem; / 192px */py-48padding-top: 12rem; /* 192px / padding-bottom: 12rem; / 192px */ps-48padding-inline-start: 12rem; /* 192px */pe-48padding-inline-end: 12rem; /* 192px */pt-48padding-top: 12rem; /* 192px */pr-48padding-right: 12rem; /* 192px */pb-48padding-bottom: 12rem; /* 192px */pl-48padding-left: 12rem; /* 192px */p-52padding: 13rem; /* 208px */px-52padding-left: 13rem; /* 208px / padding-right: 13rem; / 208px */py-52padding-top: 13rem; /* 208px / padding-bottom: 13rem; / 208px */ps-52padding-inline-start: 13rem; /* 208px */pe-52padding-inline-end: 13rem; /* 208px */pt-52padding-top: 13rem; /* 208px */pr-52padding-right: 13rem; /* 208px */pb-52padding-bottom: 13rem; /* 208px */pl-52padding-left: 13rem; /* 208px */p-56padding: 14rem; /* 224px */px-56padding-left: 14rem; /* 224px / padding-right: 14rem; / 224px */py-56padding-top: 14rem; /* 224px / padding-bottom: 14rem; / 224px */ps-56padding-inline-start: 14rem; /* 224px */pe-56padding-inline-end: 14rem; /* 224px */pt-56padding-top: 14rem; /* 224px */pr-56padding-right: 14rem; /* 224px */pb-56padding-bottom: 14rem; /* 224px */pl-56padding-left: 14rem; /* 224px */p-60padding: 15rem; /* 240px */px-60padding-left: 15rem; /* 240px / padding-right: 15rem; / 240px */py-60padding-top: 15rem; /* 240px / padding-bottom: 15rem; / 240px */ps-60padding-inline-start: 15rem; /* 240px */pe-60padding-inline-end: 15rem; /* 240px */pt-60padding-top: 15rem; /* 240px */pr-60padding-right: 15rem; /* 240px */pb-60padding-bottom: 15rem; /* 240px */pl-60padding-left: 15rem; /* 240px */p-64padding: 16rem; /* 256px */px-64padding-left: 16rem; /* 256px / padding-right: 16rem; / 256px */py-64padding-top: 16rem; /* 256px / padding-bottom: 16rem; / 256px */ps-64padding-inline-start: 16rem; /* 256px */pe-64padding-inline-end: 16rem; /* 256px */pt-64padding-top: 16rem; /* 256px */pr-64padding-right: 16rem; /* 256px */pb-64padding-bottom: 16rem; /* 256px */pl-64padding-left: 16rem; /* 256px */p-72padding: 18rem; /* 288px */px-72padding-left: 18rem; /* 288px / padding-right: 18rem; / 288px */py-72padding-top: 18rem; /* 288px / padding-bottom: 18rem; / 288px */ps-72padding-inline-start: 18rem; /* 288px */pe-72padding-inline-end: 18rem; /* 288px */pt-72padding-top: 18rem; /* 288px */pr-72padding-right: 18rem; /* 288px */pb-72padding-bottom: 18rem; /* 288px */pl-72padding-left: 18rem; /* 288px */p-80padding: 20rem; /* 320px */px-80padding-left: 20rem; /* 320px / padding-right: 20rem; / 320px */py-80padding-top: 20rem; /* 320px / padding-bottom: 20rem; / 320px */ps-80padding-inline-start: 20rem; /* 320px */pe-80padding-inline-end: 20rem; /* 320px */pt-80padding-top: 20rem; /* 320px */pr-80padding-right: 20rem; /* 320px */pb-80padding-bottom: 20rem; /* 320px */pl-80padding-left: 20rem; /* 320px */p-96padding: 24rem; /* 384px */px-96padding-left: 24rem; /* 384px / padding-right: 24rem; / 384px */py-96padding-top: 24rem; /* 384px / padding-bottom: 24rem; / 384px */ps-96padding-inline-start: 24rem; /* 384px */pe-96padding-inline-end: 24rem; /* 384px */pt-96padding-top: 24rem; /* 384px */pr-96padding-right: 24rem; /* 384px */pb-96padding-bottom: 24rem; /* 384px */pl-96padding-left: 24rem; /* 384px */ 底子样式类总结

p-1 到 p-96，设置四个方向的内边距，数字越大，内边距越大。
px-1 到 px-96，设置水平方向的内边距，数字越大，内边距越大。
py-1 到 py-96，设置垂直方向的内边距，数字越大，内边距越大。
数字隔断：

• 1-12是连续的
  
• 12-52是隔断2
  
• 52到64隔断4
  
• 64以后隔断8
  

关键字：

• p：四个方向
  
• px：水平方向
  
• py：垂直方向
  
• pt：上边
  
• pr：右边
  
• pb：下边
  
• pl：左边
  

案例：设置四个方向的内边距

需求：在一行体现四个盒子，给每个盒子分别设置四个方向上的内边距，然后观察效果。
vue3示例：

1. <script setup>
2. </script>
3. <template>
4.   <div class="flex gap-4 py-8 bg-indigo-50">
5.     <div class="pt-12 box-border bg-indigo-500 flex-1 h-32 rounded flex justify-center items-center font-bold text-3xl text-white">1</div>
6.     <div class="pr-12 box-border bg-indigo-500 flex-1 h-32 rounded flex justify-center items-center font-bold text-3xl text-white">2</div>
7.     <div class="pb-12 box-border bg-indigo-500 flex-1 h-32 rounded flex justify-center items-center font-bold text-3xl text-white">3</div>
8.     <div class="pl-12 box-border bg-indigo-500 flex-1 h-32 rounded flex justify-center items-center font-bold text-3xl text-white">4</div>
9.   </div>
10. </template>

复制代码

案例：设置水平方向和垂直方向的内边距

需求：在一行体现两个盒子，分别设置水平方向和垂直方向的内边距，观察效果。
vue3示例：

1. <script setup>
2. </script>
3. <template>
4. <div class="flex gap-4 p-8 bg-indigo-50">
5.   <div class="px-12 box-border bg-indigo-500 flex-1 h-32 rounded flex justify-center items-center font-bold text-white text-3xl">1</div>
6.   <div class="py-12 box-border bg-indigo-500 flex-1 h-32 rounded flex justify-center items-center font-bold text-white text-3xl">2</div>
7. </div>
8. </template>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。