Tailwind CSS - Scroll Padding
Tailwind CSS Scroll Padding 是一组预定义类的集合，用于控制元素滚动到视图时周围的内边距，从而提高元素在可滚动区域内的可见性和定位效果。
Tailwind CSS Scroll Padding 类
以下是用于控制可滚动区域中内容周围空间的 Tailwind CSS 滚动内边距类列表。
| 类 | CSS 属性 |
|---|---|
| scroll-p-0 | scroll-padding: 0px; |
| scroll-px-0 | scroll-padding-left: 0px; scroll-padding-right: 0px; |
| scroll-py-0 | scroll-padding-top: 0px; scroll-padding-bottom: 0px; |
| scroll-ps-0 | scroll-padding-inline-start: 0px; |
| scroll-pe-0 | scroll-padding-inline-end: 0px; |
| scroll-pt-0 | scroll-padding-top: 0px; |
| scroll-pr-0 | scroll-padding-right: 0px; |
| scroll-pb-0 | scroll-padding-bottom: 0px; |
| scroll-pl-0 | scroll-padding-left: 0px; |
| scroll-p-px | scroll-padding: 1px; |
| scroll-px-px | scroll-padding-left: 1px; scroll-padding-right: 1px; |
| scroll-py-px | scroll-padding-top: 1px; scroll-padding-bottom: 1px; |
| scroll-ps-px | scroll-padding-inline-start: 1px; |
| scroll-pe-px | scroll-padding-inline-end: 1px; |
| scroll-pt-px | scroll-padding-top: 1px; |
| scroll-pr-px | scroll-padding-right: 1px; |
| scroll-pb-px | scroll-padding-bottom: 1px; |
| scroll-pl-px | scroll-padding-left: 1px; |
| scroll-p-0.5 | scroll-padding: 0.125rem; /* 2px */ |
| scroll-px-0.5 | scroll-padding-left: 0.125rem; /* 2px */ scroll-padding-right: 0.125rem; /* 2px */ |
| scroll-py-0.5 | scroll-padding-top: 0.125rem; /* 2px */ scroll-padding-bottom: 0.125rem; /* 2px */ |
| scroll-ps-0.5 | scroll-padding-inline-start: 0.125rem; /* 2px */ |
| scroll-pe-0.5 | scroll-padding-inline-end: 0.125rem; /* 2px */ |
| scroll-pt-0.5 | scroll-padding-top: 0.125rem; /* 2px */ |
| scroll-pr-0.5 | scroll-padding-right: 0.125rem; /* 2px */ |
| scroll-pb-0.5 | scroll-padding-bottom: 0.125rem; /* 2px */ |
| scroll-pl-0.5 | scroll-padding-left: 0.125rem; /* 2px */ |
| scroll-p-1 | scroll-padding: 0.25rem; /* 4px */ |
| scroll-px-1 | scroll-padding-left: 0.25rem; /* 4px */ scroll-padding-right: 0.25rem; /* 4px */ |
| scroll-py-1 | scroll-padding-top: 0.25rem; /* 4px */ scroll-padding-bottom: 0.25rem; /* 4px */ |
| scroll-ps-1 | scroll-padding-inline-start: 0.25rem; /* 4px */ |
| scroll-pe-1 | scroll-padding-inline-end: 0.25rem; /* 4px */ |
| scroll-pt-1 | scroll-padding-top: 0.25rem; /* 4px */ |
| scroll-pr-1 | scroll-padding-right: 0.25rem; /* 4px */ |
| scroll-pb-1 | scroll-padding-bottom: 0.25rem; /* 4px */ |
| scroll-pl-1 | scroll-padding-left: 0.25rem; /* 4px */ |
| scroll-p-1.5 | scroll-padding: 0.375rem; /* 6px */ |
| scroll-px-1.5 | scroll-padding-left: 0.375rem; /* 6px */ scroll-padding-right: 0.375rem; /* 6px */ |
| scroll-py-1.5 | scroll-padding-top: 0.375rem; /* 6px */ scroll-padding-bottom: 0.375rem; /* 6px */ |
| scroll-ps-1.5 | scroll-padding-inline-start: 0.375rem; /* 6px */ |
| scroll-pe-1.5 | scroll-padding-inline-end: 0.375rem; /* 6px */ |
| scroll-pt-1.5 | scroll-padding-top: 0.375rem; /* 6px */ |
| scroll-pr-1.5 | scroll-padding-right: 0.375rem; /* 6px */ |
| scroll-pb-1.5 | scroll-padding-bottom: 0.375rem; /* 6px */ |
| scroll-pl-1.5 | scroll-padding-left: 0.375rem; /* 6px */ |
| scroll-p-2 | scroll-padding: 0.5rem; /* 8px */ |
| scroll-px-2 | scroll-padding-left: 0.5rem; /* 8px */ scroll-padding-right: 0.5rem; /* 8px */ |
| scroll-py-2 | scroll-padding-top: 0.5rem; /* 8px */ scroll-padding-bottom: 0.5rem; /* 8px */ |
| scroll-ps-2 | scroll-padding-inline-start: 0.5rem; /* 8px */ |
| scroll-pe-2 | scroll-padding-inline-end: 0.5rem; /* 8px */ |
| scroll-pt-2 | scroll-padding-top: 0.5rem; /* 8px */ |
| scroll-pr-2 | scroll-padding-right: 0.5rem; /* 8px */ |
| scroll-pb-2 | scroll-padding-bottom: 0.5rem; /* 8px */ |
| scroll-pl-2 | scroll-padding-left: 0.5rem; /* 8px */ |
| scroll-p-2.5 | scroll-padding: 0.625rem; /* 10px */ |
| scroll-px-2.5 | scroll-padding-left: 0.625rem; /* 10px */ scroll-padding-right: 0.625rem; /* 10px */ |
| scroll-py-2.5 | scroll-padding-top: 0.625rem; /* 10px */ scroll-padding-bottom: 0.625rem; /* 10px */ |
| scroll-ps-2.5 | scroll-padding-inline-start: 0.625rem; /* 10px */ |
| scroll-pe-2.5 | scroll-padding-inline-end: 0.625rem; /* 10px */ |
| scroll-pt-2.5 | scroll-padding-top: 0.625rem; /* 10px */ |
| scroll-pr-2.5 | scroll-padding-right: 0.625rem; /* 10px */ |
| scroll-pb-2.5 | scroll-padding-bottom: 0.625rem; /* 10px */ |
| scroll-pl-2.5 | scroll-padding-left: 0.625rem; /* 10px */ |
| scroll-p-3 | scroll-padding: 0.75rem; /* 12px */ |
| scroll-px-3 | scroll-padding-left: 0.75rem; /* 12px */ scroll-padding-right: 0.75rem; /* 12px */ |
| scroll-py-3 | scroll-padding-top: 0.75rem; /* 12px */ scroll-padding-bottom: 0.75rem; /* 12px */ |
| scroll-ps-3 | scroll-padding-inline-start: 0.75rem; /* 12px */ |
| scroll-pe-3 | scroll-padding-inline-end: 0.75rem; /* 12px */ |
| scroll-pt-3 | scroll-padding-top: 0.75rem; /* 12px */ |
| scroll-pr-3 | scroll-padding-right: 0.75rem; /* 12px */ |
| scroll-pb-3 | scroll-padding-bottom: 0.75rem; /* 12px */ |
| scroll-pl-3 | scroll-padding-left: 0.75rem; /* 12px */ |
| scroll-p-3.5 | scroll-padding: 0.875rem; /* 14px */ |
| scroll-px-3.5 | scroll-padding-left: 0.875rem; /* 14px */ scroll-padding-right: 0.875rem; /* 14px */ |
| scroll-py-3.5 | scroll-padding-top: 0.875rem; /* 14px */ scroll-padding-bottom: 0.875rem; /* 14px */ |
| scroll-ps-3.5 | scroll-padding-inline-start: 0.875rem; /* 14px */ |
| scroll-pe-3.5 | scroll-padding-inline-end: 0.875rem; /* 14px */ |
| scroll-pt-3.5 | scroll-padding-top: 0.875rem; /* 14px */ |
| scroll-pr-3.5 | scroll-padding-right: 0.875rem; /* 14px */ |
| scroll-pb-3.5 | scroll-padding-bottom: 0.875rem; /* 14px */ |
| scroll-pl-3.5 | scroll-padding-left: 0.875rem; /* 14px */ |
| scroll-p-4 | scroll-padding: 1rem; /* 16px */ |
| scroll-px-4 | scroll-padding-left: 1rem; /* 16px */ scroll-padding-right: 1rem; /* 16px */ |
| scroll-py-4 | scroll-padding-top: 1rem; /* 16px */ scroll-padding-bottom: 1rem; /* 16px */ |
| scroll-ps-4 | scroll-padding-inline-start: 1rem; /* 16px */ |
| scroll-pe-4 | scroll-padding-inline-end: 1rem; /* 16px */ |
| scroll-pt-4 | scroll-padding-top: 1rem; /* 16px */ |
| scroll-pr-4 | scroll-padding-right: 1rem; /* 16px */ |
| scroll-pb-4 | scroll-padding-bottom: 1rem; /* 16px */ |
| scroll-pl-4 | scroll-padding-left: 1rem; /* 16px */ |
| scroll-p-5 | scroll-padding: 1.25rem; /* 20px */ |
| scroll-px-5 | scroll-padding-left: 1.25rem; /* 20px */ scroll-padding-right: 1.25rem; /* 20px */ |
| scroll-py-5 | scroll-padding-top: 1.25rem; /* 20px */ scroll-padding-bottom: 1.25rem; /* 20px */ |
| scroll-ps-5 | scroll-padding-inline-start: 1.25rem; /* 20px */ |
| scroll-pe-5 | scroll-padding-inline-end: 1.25rem; /* 20px */ |
| scroll-pt-5 | scroll-padding-top: 1.25rem; /* 20px */ |
| scroll-pr-5 | scroll-padding-right: 1.25rem; /* 20px */ |
| scroll-pb-5 | scroll-padding-bottom: 1.25rem; /* 20px */ |
| scroll-pl-5 | scroll-padding-left: 1.25rem; /* 20px */ |
| scroll-p-6 | scroll-padding: 1.5rem; /* 24px */ |
| scroll-px-6 | scroll-padding-left: 1.5rem; /* 24px */ scroll-padding-right: 1.5rem; /* 24px */ |
| scroll-py-6 | scroll-padding-top: 1.5rem; /* 24px */ scroll-padding-bottom: 1.5rem; /* 24px */ |
| scroll-ps-6 | scroll-padding-inline-start: 1.5rem; /* 24px */ |
| scroll-pe-6 | scroll-padding-inline-end: 1.5rem; /* 24px */ |
| scroll-pt-6 | scroll-padding-top: 1.5rem; /* 24px */ |
| scroll-pr-6 | scroll-padding-right: 1.5rem; /* 24px */ |
| scroll-pb-6 | scroll-padding-bottom: 1.5rem; /* 24px */ |
| scroll-pl-6 | scroll-padding-left: 1.5rem; /* 24px */ |
| scroll-p-7 | scroll-padding: 1.75rem; /* 28px */ |
| scroll-px-7 | scroll-padding-left: 1.75rem; /* 28px */ scroll-padding-right: 1.75rem; /* 28px */ |
| scroll-py-7 | scroll-padding-top: 1.75rem; /* 28px */ scroll-padding-bottom: 1.75rem; /* 28px */ |
| scroll-ps-7 | scroll-padding-inline-start: 1.75rem; /* 28px */ |
| scroll-pe-7 | scroll-padding-inline-end: 1.75rem; /* 28px */ |
| scroll-pt-7 | scroll-padding-top: 1.75rem; /* 28px */ |
| scroll-pr-7 | scroll-padding-right: 1.75rem; /* 28px */ |
| scroll-pb-7 | scroll-padding-bottom: 1.75rem; /* 28px */ |
| scroll-pl-7 | scroll-padding-left: 1.75rem; /* 28px */ |
| scroll-p-8 | scroll-padding: 2rem; /* 32px */ |
| scroll-px-8 | scroll-padding-left: 2rem; /* 32px */ scroll-padding-right: 2rem; /* 32px */ |
| scroll-py-8 | scroll-padding-top: 2rem; /* 32px */ scroll-padding-bottom: 2rem; /* 32px */ |
| scroll-ps-8 | scroll-padding-inline-start: 2rem; /* 32px */ |
| scroll-pe-8 | scroll-padding-inline-end: 2rem; /* 32px */ |
| scroll-pt-8 | scroll-padding-top: 2rem; /* 32px */ |
| scroll-pr-8 | scroll-padding-right: 2rem; /* 32px */ |
| scroll-pb-8 | scroll-padding-bottom: 2rem; /* 32px */ |
| scroll-pl-8 | scroll-padding-left: 2rem; /* 32px */ |
| scroll-p-9 | scroll-padding: 2.25rem; /* 36px */ |
| scroll-px-9 | scroll-padding-left: 2.25rem; /* 36px */ scroll-padding-right: 2.25rem; /* 36px */ |
| scroll-py-9 | scroll-padding-top: 2.25rem; /* 36px */ scroll-padding-bottom: 2.25rem; /* 36px */ |
| scroll-ps-9 | scroll-padding-inline-start: 2.25rem; /* 36px */ |
| scroll-pe-9 | scroll-padding-inline-end: 2.25rem; /* 36px */ |
| scroll-pt-9 | scroll-padding-top: 2.25rem; /* 36px */ |
| scroll-pr-9 | scroll-padding-right: 2.25rem; /* 36px */ |
| scroll-pb-9 | scroll-padding-bottom: 2.25rem; /* 36px */ |
| scroll-pl-9 | scroll-padding-left: 2.25rem; /* 36px */ |
| scroll-p-10 | scroll-padding: 2.5rem; /* 40px */ |
| scroll-px-10 | scroll-padding-left: 2.5rem; /* 40px */ scroll-padding-right: 2.5rem; /* 40px */ |
| scroll-py-10 | scroll-padding-top: 2.5rem; /* 40px */ scroll-padding-bottom: 2.5rem; /* 40px */ |
| scroll-ps-10 | scroll-padding-inline-start: 2.5rem; /* 40px */ |
| scroll-pe-10 | scroll-padding-inline-end: 2.5rem; /* 40px */ |
| scroll-pt-10 | scroll-padding-top: 2.5rem; /* 40px */ |
| scroll-pr-10 | scroll-padding-right: 2.5rem; /* 40px */ |
| scroll-pb-10 | scroll-padding-bottom: 2.5rem; /* 40px */ |
| scroll-pl-10 | scroll-padding-left: 2.5rem; /* 40px */ |
| scroll-p-11 | scroll-padding: 2.75rem; /* 44px */ |
| scroll-px-11 | scroll-padding-left: 2.75rem; /* 44px */ scroll-padding-right: 2.75rem; /* 44px */ |
| scroll-py-11 | scroll-padding-top: 2.75rem; /* 44px */ scroll-padding-bottom: 2.75rem; /* 44px */ |
| scroll-ps-11 | scroll-padding-inline-start: 2.75rem; /* 44px */ |
| scroll-pe-11 | scroll-padding-inline-end: 2.75rem; /* 44px */ |
| scroll-pt-11 | scroll-padding-top: 2.75rem; /* 44px */ |
| scroll-pr-11 | scroll-padding-right: 2.75rem; /* 44px */ |
| scroll-pb-11 | scroll-padding-bottom: 2.75rem; /* 44px */ |
| scroll-pl-11 | scroll-padding-left: 2.75rem; /* 44px */ |
| scroll-p-12 | scroll-padding: 3rem; /* 48px */ |
| scroll-px-12 | scroll-padding-left: 3rem; /* 48px */ scroll-padding-right: 3rem; /* 48px */ |
| scroll-py-12 | scroll-padding-top: 3rem; /* 48px */ scroll-padding-bottom: 3rem; /* 48px */ |
| scroll-ps-12 | scroll-padding-inline-start: 3rem; /* 48px */ |
| scroll-pe-12 | scroll-padding-inline-end: 3rem; /* 48px */ |
| scroll-pt-12 | scroll-padding-top: 3rem; /* 48px */ |
| scroll-pr-12 | scroll-padding-right: 3rem; /* 48px */ |
| scroll-pb-12 | scroll-padding-bottom: 3rem; /* 48px */ |
| scroll-pl-12 | scroll-padding-left: 3rem; /* 48px */ |
| scroll-p-14 | scroll-padding: 3.5rem; /* 56px */ |
| scroll-px-14 | scroll-padding-left: 3.5rem; /* 56px */ scroll-padding-right: 3.5rem; /* 56px */ |
| scroll-py-14 | scroll-padding-top: 3.5rem; /* 56px */ scroll-padding-bottom: 3.5rem; /* 56px */ |
| scroll-ps-14 | scroll-padding-inline-start: 3.5rem; /* 56px */ |
| scroll-pe-14 | scroll-padding-inline-end: 3.5rem; /* 56px */ |
| scroll-pt-14 | scroll-padding-top: 3.5rem; /* 56px */ |
| scroll-pr-14 | scroll-padding-right: 3.5rem; /* 56px */ |
| scroll-pb-14 | scroll-padding-bottom: 3.5rem; /* 56px */ |
| scroll-pl-14 | scroll-padding-left: 3.5rem; /* 56px */ |
| scroll-p-16 | scroll-padding: 4rem; /* 64px */ |
| scroll-px-16 | scroll-padding-left: 4rem; /* 64px */ scroll-padding-right: 4rem; /* 64px */ |
| scroll-py-16 | scroll-padding-top: 4rem; /* 64px */ scroll-padding-bottom: 4rem; /* 64px */ |
| scroll-ps-16 | scroll-padding-inline-start: 4rem; /* 64px */ |
| scroll-pe-16 | scroll-padding-inline-end: 4rem; /* 64px */ |
| scroll-pt-16 | scroll-padding-top: 4rem; /* 64px */ |
| scroll-pr-16 | scroll-padding-right: 4rem; /* 64px */ |
| scroll-pb-16 | scroll-padding-bottom: 4rem; /* 64px */ |
| scroll-pl-16 | scroll-padding-left: 4rem; /* 64px */ |
| scroll-p-20 | scroll-padding: 5rem; /* 80px */ |
| scroll-px-20 | scroll-padding-left: 5rem; /* 80px */ scroll-padding-right: 5rem; /* 80px */ |
| scroll-py-20 | scroll-padding-top: 5rem; /* 80px */ scroll-padding-bottom: 5rem; /* 80px */ |
| scroll-ps-20 | scroll-padding-inline-start: 5rem; /* 80px */ |
| scroll-pe-20 | scroll-padding-inline-end: 5rem; /* 80px */ |
| scroll-pt-20 | scroll-padding-top: 5rem; /* 80px */ |
| scroll-pr-20 | scroll-padding-right: 5rem; /* 80px */ |
| scroll-pb-20 | scroll-padding-bottom: 5rem; /* 80px */ |
| scroll-pl-20 | scroll-padding-left: 5rem; /* 80px */ |
| scroll-p-24 | scroll-padding: 6rem; /* 96px */ |
| scroll-px-24 | scroll-padding-left: 6rem; /* 96px */ scroll-padding-right: 6rem; /* 96px */ |
| scroll-py-24 | scroll-padding-top: 6rem; /* 96px */ scroll-padding-bottom: 6rem; /* 96px */ |
| scroll-ps-24 | scroll-padding-inline-start: 6rem; /* 96px */ |
| scroll-pe-24 | scroll-padding-inline-end: 6rem; /* 96px */ |
| scroll-pt-24 | scroll-padding-top: 6rem; /* 96px */ |
| scroll-pr-24 | scroll-padding-right: 6rem; /* 96px */ |
| scroll-pb-24 | scroll-padding-bottom: 6rem; /* 96px */ |
| scroll-pl-24 | scroll-padding-left: 6rem; /* 96px */ |
| scroll-p-28 | scroll-padding: 7rem; /* 112px */ |
| scroll-px-28 | scroll-padding-left: 7rem; /* 112px */ scroll-padding-right: 7rem; /* 112px */ |
| scroll-py-28 | scroll-padding-top: 7rem; /* 112px */ scroll-padding-bottom: 7rem; /* 112px */ |
| scroll-ps-28 | scroll-padding-inline-start: 7rem; /* 112px */ |
| scroll-pe-28 | scroll-padding-inline-end: 7rem; /* 112px */ |
| scroll-pt-28 | scroll-padding-top: 7rem; /* 112px */ |
| scroll-pr-28 | scroll-padding-right: 7rem; /* 112px */ |
| scroll-pb-28 | scroll-padding-bottom: 7rem; /* 112px */ |
| scroll-pl-28 | scroll-padding-left: 7rem; /* 112px */ |
| scroll-p-32 | scroll-padding: 8rem; /* 128px */ |
| scroll-px-32 | scroll-padding-left: 8rem; /* 128px */ scroll-padding-right: 8rem; /* 128px */ |
| scroll-py-32 | scroll-padding-top: 8rem; /* 128px */ scroll-padding-bottom: 8rem; /* 128px */ |
| scroll-ps-32 | scroll-padding-inline-start: 8rem; /* 128px */ |
| scroll-pe-32 | scroll-padding-inline-end: 8rem; /* 128px */ |
| scroll-pt-32 | scroll-padding-top: 8rem; /* 128px */ |
| scroll-pr-32 | scroll-padding-right: 8rem; /* 128px */ |
| scroll-pb-32 | scroll-padding-bottom: 8rem; /* 128px */ |
| scroll-pl-32 | scroll-padding-left: 8rem; /* 128px */ |
| scroll-p-36 | scroll-padding: 9rem; /* 144px */ |
| scroll-px-36 | scroll-padding-left: 9rem; /* 144px */ scroll-padding-right: 9rem; /* 144px */ |
| scroll-py-36 | scroll-padding-top: 9rem; /* 144px */ scroll-padding-bottom: 9rem; /* 144px */ |
| scroll-ps-36 | scroll-padding-inline-start: 9rem; /* 144px */ |
| scroll-pe-36 | scroll-padding-inline-end: 9rem; /* 144px */ |
| scroll-pt-36 | scroll-padding-top: 9rem; /* 144px */ |
| scroll-pr-36 | scroll-padding-right: 9rem; /* 144px */ |
| scroll-pb-36 | scroll-padding-bottom: 9rem; /* 144px */ |
| scroll-pl-36 | scroll-padding-left: 9rem; /* 144px */ |
| scroll-p-40 | scroll-padding: 10rem; /* 160px */ |
| scroll-px-40 | scroll-padding-left: 10rem; /* 160px */ scroll-padding-right: 10rem; /* 160px */ |
| scroll-py-40 | scroll-padding-top: 10rem; /* 160px */ scroll-padding-bottom: 10rem; /* 160px */ |
| scroll-ps-40 | scroll-padding-inline-start: 10rem; /* 160px */ |
| scroll-pe-40 | scroll-padding-inline-end: 10rem; /* 160px */ |
| scroll-pt-40 | scroll-padding-top: 10rem; /* 160px */ |
| scroll-pr-40 | scroll-padding-right: 10rem; /* 160px */ |
| scroll-pb-40 | scroll-padding-bottom: 10rem; /* 160px */ |
| scroll-pl-40 | scroll-padding-left: 10rem; /* 160px */ |
| scroll-p-44 | scroll-padding: 11rem; /* 176px */ |
| scroll-px-44 | scroll-padding-left: 11rem; /* 176px */ scroll-padding-right: 11rem; /* 176px */ |
| scroll-py-44 | scroll-padding-top: 11rem; /* 176px */ scroll-padding-bottom: 11rem; /* 176px */ |
| scroll-ps-44 | scroll-padding-inline-start: 11rem; /* 176px */ |
| scroll-pe-44 | scroll-padding-inline-end: 11rem; /* 176px */ |
| scroll-pt-44 | scroll-padding-top: 11rem; /* 176px */ |
| scroll-pr-44 | scroll-padding-right: 11rem; /* 176px */ |
| scroll-p-48 | scroll-padding: 12rem; /* 192px */ |
| scroll-px-48 | scroll-padding-left: 12rem; /* 192px */ scroll-padding-right: 12rem; /* 192px */ |
| scroll-py-48 | scroll-padding-top: 12rem; /* 192px */ scroll-padding-bottom: 12rem; /* 192px */ |
| scroll-ps-48 | scroll-padding-inline-start: 12rem; /* 192px */ |
| scroll-pe-48 | scroll-padding-inline-end: 12rem; /* 192px */ |
| scroll-pt-48 | scroll-padding-top: 12rem; /* 192px */ |
| scroll-pr-48 | scroll-padding-right: 12rem; /* 192px */ |
| scroll-pb-48 | scroll-padding-bottom: 12rem; /* 192px */ |
| scroll-pl-48 | scroll-padding-left: 12rem; /* 192px */ |
| scroll-p-52 | scroll-padding: 13rem; /* 208px */ |
| scroll-px-52 | scroll-padding-left: 13rem; /* 208px */ scroll-padding-right: 13rem; /* 208px */ |
| scroll-py-52 | scroll-padding-top: 13rem; /* 208px */ scroll-padding-bottom: 13rem; /* 208px */ |
| scroll-ps-52 | scroll-padding-inline-start: 13rem; /* 208px */ |
| scroll-pe-52 | scroll-padding-inline-end: 13rem; /* 208px */ |
| scroll-pt-52 | scroll-padding-top: 13rem; /* 208px */ |
| scroll-pr-52 | scroll-padding-right: 13rem; /* 208px */ |
| scroll-pb-52 | scroll-padding-bottom: 13rem; /* 208px */ |
| scroll-pl-52 | scroll-padding-left: 13rem; /* 208px */ |
| scroll-p-56 | scroll-padding: 14rem; /* 224px */ |
| scroll-px-56 | scroll-padding-left: 14rem; /* 224px */ scroll-padding-right: 14rem; /* 224px */ |
| scroll-py-56 | scroll-padding-top: 14rem; /* 224px */ scroll-padding-bottom: 14rem; /* 224px */ |
| scroll-ps-56 | scroll-padding-inline-start: 14rem; /* 224px */ |
| scroll-pe-56 | scroll-padding-inline-end: 14rem; /* 224px */ |
| scroll-pt-56 | scroll-padding-top: 14rem; /* 224px */ |
| scroll-pr-56 | scroll-padding-right: 14rem; /* 224px */ |
| scroll-pb-56 | scroll-padding-bottom: 14rem; /* 224px */ |
| scroll-pl-56 | scroll-padding-left: 14rem; /* 224px */ |
| scroll-p-60 | scroll-padding: 15rem; /* 240px */ |
| scroll-px-60 | scroll-padding-left: 15rem; /* 240px */ scroll-padding-right: 15rem; /* 240px */ |
| scroll-py-60 | scroll-padding-top: 15rem; /* 240px */ scroll-padding-bottom: 15rem; /* 240px */ |
| scroll-ps-60 | scroll-padding-inline-start: 15rem; /* 240px */ |
| scroll-pe-60 | scroll-padding-inline-end: 15rem; /* 240px */ |
| scroll-pt-60 | scroll-padding-top: 15rem; /* 240px */ |
| scroll-pr-60 | scroll-padding-right: 15rem; /* 240px */ |
| scroll-pb-60 | scroll-padding-bottom: 15rem; /* 240px */ |
| scroll-pl-60 | scroll-padding-left: 15rem; /* 240px */ |
| scroll-p-64 | scroll-padding: 16rem; /* 256px */ |
| scroll-px-64 | scroll-padding-left: 16rem; /* 256px */ scroll-padding-right: 16rem; /* 256px */ |
| scroll-py-64 | scroll-padding-top: 16rem; /* 256px */ scroll-padding-bottom: 16rem; /* 256px */ |
| scroll-ps-64 | scroll-padding-inline-start: 16rem; /* 256px */ |
| scroll-pe-64 | scroll-padding-inline-end: 16rem; /* 256px */ |
| scroll-pt-64 | scroll-padding-top: 16rem; /* 256px */ |
| scroll-pr-64 | scroll-padding-right: 16rem; /* 256px */ |
| scroll-pb-64 | scroll-padding-bottom: 16rem; /* 256px */ |
| scroll-pl-64 | scroll-padding-left: 16rem; /* 256px */ |
| scroll-p-72 | scroll-padding: 18rem; /* 288px */ |
| scroll-px-72 | scroll-padding-left: 18rem; /* 288px */ scroll-padding-right: 18rem; /* 288px */ |
| scroll-py-72 | scroll-padding-top: 18rem; /* 288px */ scroll-padding-bottom: 18rem; /* 288px */ |
| scroll-ps-72 | scroll-padding-inline-start: 18rem; /* 288px */ |
| scroll-pe-72 | scroll-padding-inline-end: 18rem; /* 288px */ |
| scroll-pt-72 | scroll-padding-top: 18rem; /* 288px */ |
| scroll-pr-72 | scroll-padding-right: 18rem; /* 288px */ |
| scroll-pb-72 | scroll-padding-bottom: 18rem; /* 288px */ |
| scroll-pl-72 | scroll-padding-left: 18rem; /* 288px */ |
| scroll-p-80 | scroll-padding: 20rem; /* 320px */ |
| scroll-px-80 | scroll-padding-left: 20rem; /* 320px */ scroll-padding-right: 20rem; /* 320px */ |
| scroll-py-80 | scroll-padding-top: 20rem; /* 320px */ scroll-padding-bottom: 20rem; /* 320px */ |
| scroll-ps-80 | scroll-padding-inline-start: 20rem; /* 320px */ |
| scroll-pe-80 | scroll-padding-inline-end: 20rem; /* 320px */ |
| scroll-pt-80 | scroll-padding-top: 20rem; /* 320px */ |
| scroll-pr-80 | scroll-padding-right: 20rem; /* 320px */ |
| scroll-pb-80 | scroll-padding-bottom: 20rem; /* 320px */ |
| scroll-pl-80 | scroll-padding-left: 20rem; /* 320px */ |
| scroll-p-96 | scroll-padding: 24rem; /* 384px */ |
| scroll-px-96 | scroll-padding-left: 24rem; /* 384px */ scroll-padding-right: 24rem; /* 384px */ |
| scroll-py-96 | scroll-padding-top: 24rem; /* 384px */ scroll-padding-bottom: 24rem; /* 384px */ |
| scroll-ps-96 | scroll-padding-inline-start: 24rem; /* 384px */ |
| scroll-pe-96 | scroll-padding-inline-end: 24rem; /* 384px */ |
| scroll-pt-96 | scroll-padding-top: 24rem; /* 384px */ |
| scroll-pr-96 | scroll-padding-right: 24rem; /* 384px */ |
| scroll-pb-96 | scroll-padding-bottom: 24rem; /* 384px */ |
| scroll-pl-96 | scroll-padding-left: 24rem; /* 384px */ |
Tailwind CSS 滚动填充类的功能
- scroll-p-*:设置元素所有边的滚动填充。
- scroll-px-*:设置水平滚动填充(左侧和右侧)。
- scroll-py-*:设置垂直滚动填充(顶部和底部)。
- scroll-pt-*:设置顶部滚动填充。
- scroll-pr-*:设置右侧滚动填充。
- scroll-pb-*:设置底部滚动填充。
- scroll-pl-*:设置左侧滚动填充。
- scroll-ps-*:设置行内起始处(LTR 语言中为左侧)的滚动内边距。
- scroll-pe-*:设置行内结束处(LTR 语言中为右侧)的滚动内边距。
在 scroll-(className)-* 中，* 可以替换为以下尺寸值:0、px、0.5、1、1.5、2、2.5、3、3.5、4、5、6、7、8、9、10、11、12、14、16、20、24、28、32、36、40、44、48、52、56、60、64、72、80 和 96。
尺寸增量:
- 像素: 尺寸为 1px
- 0.5 到 4: 增加 2px
- 4 到 12: 增加 4px
- 12 到 16: 增加 8px
- 16 到 64: 增加 16px
- 64 到 80: 增加 32px
- 80 到 96: 增加 64px
其中 0 表示无滚动内边距，96 表示滚动内边距为 24rem (384px)。
Tailwind CSS滚动内边距类示例
以下是 Tailwind CSS 滚动内边距 类的示例，展示了如何在元素周围设置内边距，以便在元素滚动到视图中时管理元素周围的空间，确保元素在可滚动区域内正确定位并可见。
使用 Tailwind CSS 设置水平滚动内边距
此示例展示了 scroll-px-6 类，该类在水平可滚动容器内的每个项目的左右两侧添加内边距，从而在滚动时在项目周围创建额外的空间。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-2xl font-bold mb-4">
Tailwind CSS Scroll Padding
</h2>
<h3 class="underline font-bold mb-4">
Horizontal Scroll Padding Example
</h3>
<div class="scroll-px-6 px-6 flex overflow-x-auto border border-gray-300
bg-gray-100 p-2">
<div class="flex-none w-60 h-40 bg-yellow-200 mr-4">
<img src="https://picsum.photos/600/400?random=1"
class="w-full h-full object-cover" alt="Placeholder Image">
</div>
<div class="flex-none w-60 h-40 bg-blue-200 mr-4">
<img src="https://picsum.photos/600/400?random=2"
class="w-full h-full object-cover" alt="Placeholder Image">
</div>
<div class="flex-none w-60 h-40 bg-green-200 mr-4">
<img src="https://picsum.photos/600/400?random=3"
class="w-full h-full object-cover" alt="Placeholder Image">
</div>
<div class="flex-none w-60 h-40 bg-red-200 mr-4">
<img src="https://picsum.photos/600/400?random=4"
class="w-full h-full object-cover" alt="Placeholder Image">
</div>
<div class="flex-none w-60 h-40 bg-purple-200 mr-4">
<img src="https://picsum.photos/600/400?random=5"
class="w-full h-full object-cover" alt="Placeholder Image">
</div>
</div>
<p class="mt-4 text-sm text-gray-700">
Scroll horizontally to see the padding on the left
and right sides of each item due to <strong>scroll-px-6</strong>.
</p>
</body>
</html>
使用 Tailwind CSS 实现垂直滚动填充
此示例展示了 scroll-py-6 类如何在垂直可滚动容器内的每个部分的顶部和底部添加填充，从而在滚动时在部分周围创建额外的空间。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-2xl font-bold mb-4">
Tailwind CSS Scroll Padding
</h2>
<h3 class="underline font-bold mb-4">
Vertical Scroll Padding Example
</h3>
<div class="scroll-py-6 py-6 max-h-56 overflow-y-auto border
border-gray-300 bg-gray-100 p-2 scroll-py-6">
<div class="h-40 bg-yellow-200 mb-4">
<p class="p-4">First Section</p>
</div>
<div class="h-40 bg-blue-200 mb-4">
<p class="p-4">Second Section</p>
</div>
<div class="h-40 bg-green-200 mb-4">
<p class="p-4">Third Section</p>
</div>
<div class="h-40 bg-red-200 mb-4">
<p class="p-4">Fourth Section</p>
</div>
<div class="h-40 bg-purple-200">
<p class="p-4">Fifth Section</p>
</div>
</div>
<p class="mt-4 text-sm text-gray-700">
Scroll vertically to see the padding on
the top and bottom of each section due to
<strong>scroll-py-6</strong>.
</p>
</body>
</html>
