Tailwind CSS - Scroll Margin
Tailwind CSS Scroll Margin 是一组预定义类，用于控制元素滚动到视图时周围的间距，从而改善元素在视口内的定位和可见性。
Tailwind CSS Scroll Margin 类
以下是 Tailwind CSS Scroll Margin 滚动边距类的列表，可用于为元素设置不同的滚动边距。
| 类 | CSS 属性 |
|---|---|
| scroll-m-0 | scroll-margin: 0px; |
| scroll-mx-0 | scroll-margin-left: 0px; scroll-margin-right: 0px; |
| scroll-my-0 | scroll-margin-top: 0px; scroll-margin-bottom: 0px; |
| scroll-ms-0 | scroll-margin-inline-start: 0px; |
| scroll-me-0 | scroll-margin-inline-end: 0px; |
| scroll-mt-0 | scroll-margin-top: 0px; |
| scroll-mr-0 | scroll-margin-right: 0px; |
| scroll-mb-0 | scroll-margin-bottom: 0px; |
| scroll-ml-0 | scroll-margin-left: 0px; |
| scroll-m-px | scroll-margin: 1px; |
| scroll-mx-px | scroll-margin-left: 1px; scroll-margin-right: 1px; |
| scroll-my-px | scroll-margin-top: 1px; scroll-margin-bottom: 1px; |
| scroll-ms-px | scroll-margin-inline-start: 1px; |
| scroll-me-px | scroll-margin-inline-end: 1px; |
| scroll-mt-px | scroll-margin-top: 1px; |
| scroll-mr-px | scroll-margin-right: 1px; |
| scroll-mb-px | scroll-margin-bottom: 1px; |
| scroll-ml-px | scroll-margin-left: 1px; |
| scroll-m-0.5 | scroll-margin: 0.125rem; /* 2px */ |
| scroll-mx-0.5 | scroll-margin-left: 0.125rem; /* 2px */ scroll-margin-right: 0.125rem; /* 2px */ |
| scroll-my-0.5 | scroll-margin-top: 0.125rem; /* 2px */ scroll-margin-bottom: 0.125rem; /* 2px */ |
| scroll-ms-0.5 | scroll-margin-inline-start: 0.125rem; /* 2px */ |
| scroll-me-0.5 | scroll-margin-inline-end: 0.125rem; /* 2px */ |
| scroll-mt-0.5 | scroll-margin-top: 0.125rem; /* 2px */ |
| scroll-mr-0.5 | scroll-margin-right: 0.125rem; /* 2px */ |
| scroll-mb-0.5 | scroll-margin-bottom: 0.125rem; /* 2px */ |
| scroll-ml-0.5 | scroll-margin-left: 0.125rem; /* 2px */ |
| scroll-m-1 | scroll-margin: 0.25rem; /* 4px */ |
| scroll-mx-1 | scroll-margin-left: 0.25rem; /* 4px */ scroll-margin-right: 0.25rem; /* 4px */ |
| scroll-my-1 | scroll-margin-top: 0.25rem; /* 4px */ scroll-margin-bottom: 0.25rem; /* 4px */ |
| scroll-ms-1 | scroll-margin-inline-start: 0.25rem; /* 4px */ |
| scroll-me-1 | scroll-margin-inline-end: 0.25rem; /* 4px */ |
| scroll-mt-1 | scroll-margin-top: 0.25rem; /* 4px */ |
| scroll-mr-1 | scroll-margin-right: 0.25rem; /* 4px */ |
| scroll-mb-1 | scroll-margin-bottom: 0.25rem; /* 4px */ |
| scroll-ml-1 | scroll-margin-left: 0.25rem; /* 4px */ |
| scroll-m-1.5 | scroll-margin: 0.375rem; /* 6px */ |
| scroll-mx-1.5 | scroll-margin-left: 0.375rem; /* 6px */ scroll-margin-right: 0.375rem; /* 6px */ |
| scroll-my-1.5 | scroll-margin-top: 0.375rem; /* 6px */ scroll-margin-bottom: 0.375rem; /* 6px */ |
| scroll-ms-1.5 | scroll-margin-inline-start: 0.375rem; /* 6px */ |
| scroll-me-1.5 | scroll-margin-inline-end: 0.375rem; /* 6px */ |
| scroll-mt-1.5 | scroll-margin-top: 0.375rem; /* 6px */ |
| scroll-mr-1.5 | scroll-margin-right: 0.375rem; /* 6px */ |
| scroll-mb-1.5 | scroll-margin-bottom: 0.375rem; /* 6px */ |
| scroll-ml-1.5 | scroll-margin-left: 0.375rem; /* 6px */ |
| scroll-m-2 | scroll-margin: 0.5rem; /* 8px */ |
| scroll-mx-2 | scroll-margin-left: 0.5rem; /* 8px */ scroll-margin-right: 0.5rem; /* 8px */ |
| scroll-my-2 | scroll-margin-top: 0.5rem; /* 8px */ scroll-margin-bottom: 0.5rem; /* 8px */ |
| scroll-ms-2 | scroll-margin-inline-start: 0.5rem; /* 8px */ |
| scroll-me-2 | scroll-margin-inline-end: 0.5rem; /* 8px */ |
| scroll-mt-2 | scroll-margin-top: 0.5rem; /* 8px */ |
| scroll-mr-2 | scroll-margin-right: 0.5rem; /* 8px */ |
| scroll-mb-2 | scroll-margin-bottom: 0.5rem; /* 8px */ |
| scroll-ml-2 | scroll-margin-left: 0.5rem; /* 8px */ |
| scroll-m-2.5 | scroll-margin: 0.625rem; /* 10px */ |
| scroll-mx-2.5 | scroll-margin-left: 0.625rem; /* 10px */ scroll-margin-right: 0.625rem; /* 10px */ |
| scroll-my-2.5 | scroll-margin-top: 0.625rem; /* 10px */ scroll-margin-bottom: 0.625rem; /* 10px */ |
| scroll-ms-2.5 | scroll-margin-inline-start: 0.625rem; /* 10px */ |
| scroll-me-2.5 | scroll-margin-inline-end: 0.625rem; /* 10px */ |
| scroll-mt-2.5 | scroll-margin-top: 0.625rem; /* 10px */ |
| scroll-mr-2.5 | scroll-margin-right: 0.625rem; /* 10px */ |
| scroll-mb-2.5 | scroll-margin-bottom: 0.625rem; /* 10px */ |
| scroll-ml-2.5 | scroll-margin-left: 0.625rem; /* 10px */ |
| scroll-m-3 | scroll-margin: 0.75rem; /* 12px */ |
| scroll-mx-3 | scroll-margin-left: 0.75rem; /* 12px */ scroll-margin-right: 0.75rem; /* 12px */ |
| scroll-my-3 | scroll-margin-top: 0.75rem; /* 12px */ scroll-margin-bottom: 0.75rem; /* 12px */ |
| scroll-ms-3 | scroll-margin-inline-start: 0.75rem; /* 12px */ |
| scroll-me-3 | scroll-margin-inline-end: 0.75rem; /* 12px */ |
| scroll-mt-3 | scroll-margin-top: 0.75rem; /* 12px */ |
| scroll-mr-3 | scroll-margin-right: 0.75rem; /* 12px */ |
| scroll-mb-3 | scroll-margin-bottom: 0.75rem; /* 12px */ |
| scroll-ml-3 | scroll-margin-left: 0.75rem; /* 12px */ |
| scroll-m-3.5 | scroll-margin: 0.875rem; /* 14px */ |
| scroll-mx-3.5 | scroll-margin-left: 0.875rem; /* 14px */ scroll-margin-right: 0.875rem; /* 14px */ |
| scroll-my-3.5 | scroll-margin-top: 0.875rem; /* 14px */ scroll-margin-bottom: 0.875rem; /* 14px */ |
| scroll-ms-3.5 | scroll-margin-inline-start: 0.875rem; /* 14px */ |
| scroll-me-3.5 | scroll-margin-inline-end: 0.875rem; /* 14px */ |
| scroll-mt-3.5 | scroll-margin-top: 0.875rem; /* 14px */ |
| scroll-mr-3.5 | scroll-margin-right: 0.875rem; /* 14px */ |
| scroll-mb-3.5 | scroll-margin-bottom: 0.875rem; /* 14px */ |
| scroll-ml-3.5 | scroll-margin-left: 0.875rem; /* 14px */ |
| scroll-m-4 | scroll-margin: 1rem; /* 16px */ |
| scroll-mx-4 | scroll-margin-left: 1rem; /* 16px */ scroll-margin-right: 1rem; /* 16px */ |
| scroll-my-4 | scroll-margin-top: 1rem; /* 16px */ scroll-margin-bottom: 1rem; /* 16px */ |
| scroll-ms-4 | scroll-margin-inline-start: 1rem; /* 16px */ |
| scroll-me-4 | scroll-margin-inline-end: 1rem; /* 16px */ |
| scroll-mt-4 | scroll-margin-top: 1rem; /* 16px */ |
| scroll-mr-4 | scroll-margin-right: 1rem; /* 16px */ |
| scroll-mb-4 | scroll-margin-bottom: 1rem; /* 16px */ |
| scroll-ml-4 | scroll-margin-left: 1rem; /* 16px */ |
| scroll-m-5 | scroll-margin: 1.25rem; /* 20px */ |
| scroll-mx-5 | scroll-margin-left: 1.25rem; /* 20px */ scroll-margin-right: 1.25rem; /* 20px */ |
| scroll-my-5 | scroll-margin-top: 1.25rem; /* 20px */ scroll-margin-bottom: 1.25rem; /* 20px */ |
| scroll-ms-5 | scroll-margin-inline-start: 1.25rem; /* 20px */ |
| scroll-me-5 | scroll-margin-inline-end: 1.25rem; /* 20px */ |
| scroll-mt-5 | scroll-margin-top: 1.25rem; /* 20px */ |
| scroll-mr-5 | scroll-margin-right: 1.25rem; /* 20px */ |
| scroll-mb-5 | scroll-margin-bottom: 1.25rem; /* 20px */ |
| scroll-ml-5 | scroll-margin-left: 1.25rem; /* 20px */ |
| scroll-m-6 | scroll-margin: 1.5rem; /* 24px */ |
| scroll-mx-6 | scroll-margin-left: 1.5rem; /* 24px */ scroll-margin-right: 1.5rem; /* 24px */ |
| scroll-my-6 | scroll-margin-top: 1.5rem; /* 24px */ scroll-margin-bottom: 1.5rem; /* 24px */ |
| scroll-ms-6 | scroll-margin-inline-start: 1.5rem; /* 24px */ |
| scroll-me-6 | scroll-margin-inline-end: 1.5rem; /* 24px */ |
| scroll-mt-6 | scroll-margin-top: 1.5rem; /* 24px */ |
| scroll-mr-6 | scroll-margin-right: 1.5rem; /* 24px */ |
| scroll-mb-6 | scroll-margin-bottom: 1.5rem; /* 24px */ |
| scroll-ml-6 | scroll-margin-left: 1.5rem; /* 24px */ |
| scroll-m-7 | scroll-margin: 1.75rem; /* 28px */ |
| scroll-mx-7 | scroll-margin-left: 1.75rem; /* 28px */ scroll-margin-right: 1.75rem; /* 28px */ |
| scroll-my-7 | scroll-margin-top: 1.75rem; /* 28px */ scroll-margin-bottom: 1.75rem; /* 28px */ |
| scroll-ms-7 | scroll-margin-inline-start: 1.75rem; /* 28px */ |
| scroll-me-7 | scroll-margin-inline-end: 1.75rem; /* 28px */ |
| scroll-mt-7 | scroll-margin-top: 1.75rem; /* 28px */ |
| scroll-mr-7 | scroll-margin-right: 1.75rem; /* 28px */ |
| scroll-mb-7 | scroll-margin-bottom: 1.75rem; /* 28px */ |
| scroll-ml-7 | scroll-margin-left: 1.75rem; /* 28px */ |
| scroll-m-8 | scroll-margin: 2rem; /* 32px */ |
| scroll-mx-8 | scroll-margin-left: 2rem; /* 32px */ scroll-margin-right: 2rem; /* 32px */ |
| scroll-my-8 | scroll-margin-top: 2rem; /* 32px */ scroll-margin-bottom: 2rem; /* 32px */ |
| scroll-ms-8 | scroll-margin-inline-start: 2rem; /* 32px */ |
| scroll-me-8 | scroll-margin-inline-end: 2rem; /* 32px */ |
| scroll-mt-8 | scroll-margin-top: 2rem; /* 32px */ |
| scroll-mr-8 | scroll-margin-right: 2rem; /* 32px */ |
| scroll-mb-8 | scroll-margin-bottom: 2rem; /* 32px */ |
| scroll-ml-8 | scroll-margin-left: 2rem; /* 32px */ |
| scroll-m-9 | scroll-margin: 2.25rem; /* 36px */ |
| scroll-mx-9 | scroll-margin-left: 2.25rem; /* 36px */ scroll-margin-right: 2.25rem; /* 36px */ |
| scroll-my-9 | scroll-margin-top: 2.25rem; /* 36px */ scroll-margin-bottom: 2.25rem; /* 36px */ |
| scroll-ms-9 | scroll-margin-inline-start: 2.25rem; /* 36px */ |
| scroll-me-9 | scroll-margin-inline-end: 2.25rem; /* 36px */ |
| scroll-mt-9 | scroll-margin-top: 2.25rem; /* 36px */ |
| scroll-mr-9 | scroll-margin-right: 2.25rem; /* 36px */ |
| scroll-mb-9 | scroll-margin-bottom: 2.25rem; /* 36px */ |
| scroll-ml-9 | scroll-margin-left: 2.25rem; /* 36px */ |
| scroll-m-10 | scroll-margin: 2.5rem; /* 40px */ |
| scroll-mx-10 | scroll-margin-left: 2.5rem; /* 40px */ scroll-margin-right: 2.5rem; /* 40px */ |
| scroll-my-10 | scroll-margin-top: 2.5rem; /* 40px */ scroll-margin-bottom: 2.5rem; /* 40px */ |
| scroll-ms-10 | scroll-margin-inline-start: 2.5rem; /* 40px */ |
| scroll-me-10 | scroll-margin-inline-end: 2.5rem; /* 40px */ |
| scroll-mt-10 | scroll-margin-top: 2.5rem; /* 40px */ |
| scroll-mr-10 | scroll-margin-right: 2.5rem; /* 40px */ |
| scroll-mb-10 | scroll-margin-bottom: 2.5rem; /* 40px */ |
| scroll-ml-10 | scroll-margin-left: 2.5rem; /* 40px */ |
| scroll-m-11 | scroll-margin: 2.75rem; /* 44px */ |
| scroll-mx-11 | scroll-margin-left: 2.75rem; /* 44px */ scroll-margin-right: 2.75rem; /* 44px */ |
| scroll-my-11 | scroll-margin-top: 2.75rem; /* 44px */ scroll-margin-bottom: 2.75rem; /* 44px */ |
| scroll-ms-11 | scroll-margin-inline-start: 2.75rem; /* 44px */ |
| scroll-me-11 | scroll-margin-inline-end: 2.75rem; /* 44px */ |
| scroll-mt-11 | scroll-margin-top: 2.75rem; /* 44px */ |
| scroll-mr-11 | scroll-margin-right: 2.75rem; /* 44px */ |
| scroll-mb-11 | scroll-margin-bottom: 2.75rem; /* 44px */ |
| scroll-ml-11 | scroll-margin-left: 2.75rem; /* 44px */ |
| scroll-m-12 | scroll-margin: 3rem; /* 48px */ |
| scroll-mx-12 | scroll-margin-left: 3rem; /* 48px */ scroll-margin-right: 3rem; /* 48px */ |
| scroll-my-12 | scroll-margin-top: 3rem; /* 48px */ scroll-margin-bottom: 3rem; /* 48px */ |
| scroll-ms-12 | scroll-margin-inline-start: 3rem; /* 48px */ |
| scroll-me-12 | scroll-margin-inline-end: 3rem; /* 48px */ |
| scroll-mt-12 | scroll-margin-top: 3rem; /* 48px */ |
| scroll-mr-12 | scroll-margin-right: 3rem; /* 48px */ |
| scroll-mb-12 | scroll-margin-bottom: 3rem; /* 48px */ |
| scroll-ml-12 | scroll-margin-left: 3rem; /* 48px */ |
| scroll-m-14 | scroll-margin: 3.5rem; /* 56px */ |
| scroll-mx-14 | scroll-margin-left: 3.5rem; /* 56px */ scroll-margin-right: 3.5rem; /* 56px */ |
| scroll-my-14 | scroll-margin-top: 3.5rem; /* 56px */ scroll-margin-bottom: 3.5rem; /* 56px */ |
| scroll-ms-14 | scroll-margin-inline-start: 3.5rem; /* 56px */ |
| scroll-me-14 | scroll-margin-inline-end: 3.5rem; /* 56px */ |
| scroll-mt-14 | scroll-margin-top: 3.5rem; /* 56px */ |
| scroll-mr-14 | scroll-margin-right: 3.5rem; /* 56px */ |
| scroll-mb-14 | scroll-margin-bottom: 3.5rem; /* 56px */ |
| scroll-ml-14 | scroll-margin-left: 3.5rem; /* 56px */ |
| scroll-m-16 | scroll-margin: 4rem; /* 64px */ |
| scroll-mx-16 | scroll-margin-left: 4rem; /* 64px */ scroll-margin-right: 4rem; /* 64px */ |
| scroll-my-16 | scroll-margin-top: 4rem; /* 64px */ scroll-margin-bottom: 4rem; /* 64px */ |
| scroll-ms-16 | scroll-margin-inline-start: 4rem; /* 64px */ |
| scroll-me-16 | scroll-margin-inline-end: 4rem; /* 64px */ |
| scroll-mt-16 | scroll-margin-top: 4rem; /* 64px */ |
| scroll-mr-16 | scroll-margin-right: 4rem; /* 64px */ |
| scroll-mb-16 | scroll-margin-bottom: 4rem; /* 64px */ |
| scroll-ml-16 | scroll-margin-left: 4rem; /* 64px */ |
| scroll-m-20 | scroll-margin: 5rem; /* 80px */ |
| scroll-mx-20 | scroll-margin-left: 5rem; /* 80px */ scroll-margin-right: 5rem; /* 80px */ |
| scroll-my-20 | scroll-margin-top: 5rem; /* 80px */ scroll-margin-bottom: 5rem; /* 80px */ |
| scroll-ms-20 | scroll-margin-inline-start: 5rem; /* 80px */ |
| scroll-me-20 | scroll-margin-inline-end: 5rem; /* 80px */ |
| scroll-mt-20 | scroll-margin-top: 5rem; /* 80px */ |
| scroll-mr-20 | scroll-margin-right: 5rem; /* 80px */ |
| scroll-mb-20 | scroll-margin-bottom: 5rem; /* 80px */ |
| scroll-ml-20 | scroll-margin-left: 5rem; /* 80px */ |
| scroll-m-24 | scroll-margin: 6rem; /* 96px */ |
| scroll-mx-24 | scroll-margin-left: 6rem; /* 96px */ scroll-margin-right: 6rem; /* 96px */ |
| scroll-my-24 | scroll-margin-top: 6rem; /* 96px */ scroll-margin-bottom: 6rem; /* 96px */ |
| scroll-ms-24 | scroll-margin-inline-start: 6rem; /* 96px */ |
| scroll-me-24 | scroll-margin-inline-end: 6rem; /* 96px */ |
| scroll-mt-24 | scroll-margin-top: 6rem; /* 96px */ |
| scroll-mr-24 | scroll-margin-right: 6rem; /* 96px */ |
| scroll-mb-24 | scroll-margin-bottom: 6rem; /* 96px */ |
| scroll-ml-24 | scroll-margin-left: 6rem; /* 96px */ |
| scroll-m-28 | scroll-margin: 7rem; /* 112px */ |
| scroll-mx-28 | scroll-margin-left: 7rem; /* 112px */ scroll-margin-right: 7rem; /* 112px */ |
| scroll-my-28 | scroll-margin-top: 7rem; /* 112px */ scroll-margin-bottom: 7rem; /* 112px */ |
| scroll-ms-28 | scroll-margin-inline-start: 7rem; /* 112px */ |
| scroll-me-28 | scroll-margin-inline-end: 7rem; /* 112px */ |
| scroll-mt-28 | scroll-margin-top: 7rem; /* 112px */ |
| scroll-mr-28 | scroll-margin-right: 7rem; /* 112px */ |
| scroll-mb-28 | scroll-margin-bottom: 7rem; /* 112px */ |
| scroll-ml-28 | scroll-margin-left: 7rem; /* 112px */ |
| scroll-m-32 | scroll-margin: 8rem; /* 128px */ |
| scroll-mx-32 | scroll-margin-left: 8rem; /* 128px */ scroll-margin-right: 8rem; /* 128px */ |
| scroll-my-32 | scroll-margin-top: 8rem; /* 128px */ scroll-margin-bottom: 8rem; /* 128px */ |
| scroll-ms-32 | scroll-margin-inline-start: 8rem; /* 128px */ |
| scroll-me-32 | scroll-margin-inline-end: 8rem; /* 128px */ |
| scroll-mt-32 | scroll-margin-top: 8rem; /* 128px */ |
| scroll-mr-32 | scroll-margin-right: 8rem; /* 128px */ |
| scroll-mb-32 | scroll-margin-bottom: 8rem; /* 128px */ |
| scroll-ml-32 | scroll-margin-left: 8rem; /* 128px */ |
| scroll-m-36 | scroll-margin: 9rem; /* 144px */ |
| scroll-mx-36 | scroll-margin-left: 9rem; /* 144px */ scroll-margin-right: 9rem; /* 144px */ |
| scroll-my-36 | scroll-margin-top: 9rem; /* 144px */ scroll-margin-bottom: 9rem; /* 144px */ |
| scroll-ms-36 | scroll-margin-inline-start: 9rem; /* 144px */ |
| scroll-me-36 | scroll-margin-inline-end: 9rem; /* 144px */ |
| scroll-mt-36 | scroll-margin-top: 9rem; /* 144px */ |
| scroll-mr-36 | scroll-margin-right: 9rem; /* 144px */ |
| scroll-mb-36 | scroll-margin-bottom: 9rem; /* 144px */ |
| scroll-ml-36 | scroll-margin-left: 9rem; /* 144px */ |
| scroll-m-40 | scroll-margin: 10rem; /* 160px */ |
| scroll-mx-40 | scroll-margin-left: 10rem; /* 160px */ scroll-margin-right: 10rem; /* 160px */ |
| scroll-my-40 | scroll-margin-top: 10rem; /* 160px */ scroll-margin-bottom: 10rem; /* 160px */ |
| scroll-ms-40 | scroll-margin-inline-start: 10rem; /* 160px */ |
| scroll-me-40 | scroll-margin-inline-end: 10rem; /* 160px */ |
| scroll-mt-40 | scroll-margin-top: 10rem; /* 160px */ |
| scroll-mr-40 | scroll-margin-right: 10rem; /* 160px */ |
| scroll-mb-40 | scroll-margin-bottom: 10rem; /* 160px */ |
| scroll-ml-40 | scroll-margin-left: 10rem; /* 160px */ |
| scroll-m-44 | scroll-margin: 11rem; /* 176px */ |
| scroll-mx-44 | scroll-margin-left: 11rem; /* 176px */ scroll-margin-right: 11rem; /* 176px */ |
| scroll-my-44 | scroll-margin-top: 11rem; /* 176px */ scroll-margin-bottom: 11rem; /* 176px */ |
| scroll-ms-44 | scroll-margin-inline-start: 11rem; /* 176px */ |
| scroll-me-44 | scroll-margin-inline-end: 11rem; /* 176px */ |
| scroll-mt-44 | scroll-margin-top: 11rem; /* 176px */ |
| scroll-mr-44 | scroll-margin-right: 11rem; /* 176px */ |
| scroll-mb-44 | scroll-margin-bottom: 11rem; /* 176px */ |
| scroll-ml-44 | scroll-margin-left: 11rem; /* 176px */ |
| scroll-m-48 | scroll-margin: 12rem; /* 192px */ |
| scroll-mx-48 | scroll-margin-left: 12rem; /* 192px */ scroll-margin-right: 12rem; /* 192px */ |
| scroll-my-48 | scroll-margin-top: 12rem; /* 192px */ scroll-margin-bottom: 12rem; /* 192px */ |
| scroll-ms-48 | scroll-margin-inline-start: 12rem; /* 192px */ |
| scroll-me-48 | scroll-margin-inline-end: 12rem; /* 192px */ |
| scroll-mt-48 | scroll-margin-top: 12rem; /* 192px */ |
| scroll-mr-48 | scroll-margin-right: 12rem; /* 192px */ |
| scroll-mb-48 | scroll-margin-bottom: 12rem; /* 192px */ |
| scroll-ml-48 | scroll-margin-left: 12rem; /* 192px */ |
| scroll-m-52 | scroll-margin: 13rem; /* 208px */ |
| scroll-mx-52 | scroll-margin-left: 13rem; /* 208px */ scroll-margin-right: 13rem; /* 208px */ |
| scroll-my-52 | scroll-margin-top: 13rem; /* 208px */ scroll-margin-bottom: 13rem; /* 208px */ |
| scroll-ms-52 | scroll-margin-inline-start: 13rem; /* 208px */ |
| scroll-me-52 | scroll-margin-inline-end: 13rem; /* 208px */ |
| scroll-mt-52 | scroll-margin-top: 13rem; /* 208px */ |
| scroll-mr-52 | scroll-margin-right: 13rem; /* 208px */ |
| scroll-mb-52 | scroll-margin-bottom: 13rem; /* 208px */ |
| scroll-ml-52 | scroll-margin-left: 13rem; /* 208px */ |
| scroll-m-56 | scroll-margin: 14rem; /* 224px */ |
| scroll-mx-56 | scroll-margin-left: 14rem; /* 224px */ scroll-margin-right: 14rem; /* 224px */ |
| scroll-my-56 | scroll-margin-top: 14rem; /* 224px */ scroll-margin-bottom: 14rem; /* 224px */ |
| scroll-ms-56 | scroll-margin-inline-start: 14rem; /* 224px */ |
| scroll-me-56 | scroll-margin-inline-end: 14rem; /* 224px */ |
| scroll-mt-56 | scroll-margin-top: 14rem; /* 224px */ |
| scroll-mr-56 | scroll-margin-right: 14rem; /* 224px */ |
| scroll-mb-56 | scroll-margin-bottom: 14rem; /* 224px */ |
| scroll-ml-56 | scroll-margin-left: 14rem; /* 224px */ |
| scroll-m-60 | scroll-margin: 15rem; /* 240px */ |
| scroll-mx-60 | scroll-margin-left: 15rem; /* 240px */ scroll-margin-right: 15rem; /* 240px */ |
| scroll-my-60 | scroll-margin-top: 15rem; /* 240px */ scroll-margin-bottom: 15rem; /* 240px */ |
| scroll-ms-60 | scroll-margin-inline-start: 15rem; /* 240px */ |
| scroll-me-60 | scroll-margin-inline-end: 15rem; /* 240px */ |
| scroll-mt-60 | scroll-margin-top: 15rem; /* 240px */ |
| scroll-mr-60 | scroll-margin-right: 15rem; /* 240px */ |
| scroll-mb-60 | scroll-margin-bottom: 15rem; /* 240px */ |
| scroll-ml-60 | scroll-margin-left: 15rem; /* 240px */ |
| scroll-m-64 | scroll-margin: 16rem; /* 256px */ |
| scroll-mx-64 | scroll-margin-left: 16rem; /* 256px */ scroll-margin-right: 16rem; /* 256px */ |
| scroll-my-64 | scroll-margin-top: 16rem; /* 256px */ scroll-margin-bottom: 16rem; /* 256px */ |
| scroll-ms-64 | scroll-margin-inline-start: 16rem; /* 256px */ |
| scroll-me-64 | scroll-margin-inline-end: 16rem; /* 256px */ |
| scroll-mt-64 | scroll-margin-top: 16rem; /* 256px */ |
| scroll-mr-64 | scroll-margin-right: 16rem; /* 256px */ |
| scroll-mb-64 | scroll-margin-bottom: 16rem; /* 256px */ |
| scroll-ml-64 | scroll-margin-left: 16rem; /* 256px */ |
| scroll-m-72 | scroll-margin: 18rem; /* 288px */ |
| scroll-mx-72 | scroll-margin-left: 18rem; /* 288px */ scroll-margin-right: 18rem; /* 288px */ |
| scroll-my-72 | scroll-margin-top: 18rem; /* 288px */ scroll-margin-bottom: 18rem; /* 288px */ |
| scroll-ms-72 | scroll-margin-inline-start: 18rem; /* 288px */ |
| scroll-me-72 | scroll-margin-inline-end: 18rem; /* 288px */ |
| scroll-mt-72 | scroll-margin-top: 18rem; /* 288px */ |
| scroll-mr-72 | scroll-margin-right: 18rem; /* 288px */ |
| scroll-mb-72 | scroll-margin-bottom: 18rem; /* 288px */ |
| scroll-ml-72 | scroll-margin-left: 18rem; /* 288px */ |
| scroll-m-80 | scroll-margin: 20rem; /* 320px */ |
| scroll-mx-80 | scroll-margin-left: 20rem; /* 320px */ scroll-margin-right: 20rem; /* 320px */ |
| scroll-my-80 | scroll-margin-top: 20rem; /* 320px */ scroll-margin-bottom: 20rem; /* 320px */ |
| scroll-ms-80 | scroll-margin-inline-start: 20rem; /* 320px */ |
| scroll-me-80 | scroll-margin-inline-end: 20rem; /* 320px */ |
| scroll-mt-80 | scroll-margin-top: 20rem; /* 320px */ |
| scroll-mr-80 | scroll-margin-right: 20rem; /* 320px */ |
| scroll-mb-80 | scroll-margin-bottom: 20rem; /* 320px */ |
| scroll-ml-80 | scroll-margin-left: 20rem; /* 320px */ |
| scroll-m-96 | scroll-margin: 24rem; /* 384px */ |
| scroll-mx-96 | scroll-margin-left: 24rem; /* 384px */ scroll-margin-right: 24rem; /* 384px */ |
| scroll-my-96 | scroll-margin-top: 24rem; /* 384px */ scroll-margin-bottom: 24rem; /* 384px */ |
| scroll-ms-96 | scroll-margin-inline-start: 24rem; /* 384px */ |
| scroll-me-96 | scroll-margin-inline-end: 24rem; /* 384px */ |
| scroll-mt-96 | scroll-margin-top: 24rem; /* 384px */ |
| scroll-mr-96 | scroll-margin-right: 24rem; /* 384px */ |
| scroll-mb-96 | scroll-margin-bottom: 24rem; /* 384px */ |
| scroll-ml-96 | scroll-margin-left: 24rem; /* 384px */ |
Tailwind CSS 滚动边距类的功能
- scroll-m-*:设置元素所有边的滚动边距。
- scroll-mx-*:设置水平滚动边距(左右)。
- scroll-my-*:设置垂直滚动边距(上下)。
- scroll-mt-*:设置顶部滚动边距。
- scroll-mr-*:设置右侧滚动边距。
- scroll-mb-*:设置底部滚动边距。
- scroll-ml-*:设置左侧滚动边距。
- scroll-ms-*:设置行内起始(LTR 语言中为左侧)。
- scroll-me-*:设置行内结束处的滚动边距。
在 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。
尺寸增量:
- px: 尺寸为 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 应用滚动边距类
此示例展示了如何使用 Tailwind CSS 滚动边距类来应用不同的滚动边距样式。使用 scroll-* 实用程序可根据需要调整滚动边距的外观。此示例展示了添加底部边距如何影响垂直滚动和捕捉行为。
示例
<!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 Margin
</h2>
<h3 class="underline font-bold mb-4">
Scroll Margin Bottom Example
</h3>
<div class="max-h-32 snap-y overflow-y-auto
border border-gray-300 p-2 bg-gray-100">
<div class="scroll-mb-6 h-48 bg-yellow-200 mb-6">
Section with Scroll Margin Bottom
</div>
<div class="scroll-mb-6 h-48 bg-blue-200 mb-6">
Another Section
</div>
<div class="scroll-mb-6 h-48 bg-green-200 mb-6">
Final Section
</div>
</div>
<p class="mt-4 text-sm text-gray-700">
Scroll down to see the extra space below each box
due to the <strong>scroll-mb-6</strong> class.
</p>
</body>
</html>
Tailwind CSS 中的右侧滚动边距
此示例展示如何使用 scroll-mr-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 Margin
</h2>
<h3 class="underline font-bold mb-4">
Scroll Margin Right Example
</h3>
<div class="flex overflow-x-auto border snap-x
border-gray-300 p-2 bg-gray-100">
<div class="scroll-mr-6 mr-6 snap-end w-60 h-40
flex-shrink-0 bg-gray-300">
<img src="https://picsum.photos/600/400?random=1">
</div>
<div class="scroll-mr-6 mr-6 snap-end w-60 h-40
flex-shrink-0 bg-gray-300">
<img src="https://picsum.photos/600/400?random=2">
</div>
<div class="scroll-mr-6 mr-6 snap-end w-60 h-40
flex-shrink-0 bg-gray-300">
<img src="https://picsum.photos/600/400?random=3">
</div>
<div class="scroll-mr-6 mr-6 snap-end w-60 h-40
flex-shrink-0 bg-gray-300">
<img src="https://picsum.photos/600/400?random=4">
</div>
<div class="scroll-mr-6 mr-6 snap-end w-60 h-40
flex-shrink-0 bg-gray-300">
<img src="https://picsum.photos/600/400?random=5">
</div>
</div>
<p class="mt-4 text-sm text-gray-700">
Scroll horizontally to see the extra space between
images due to <strong>scroll-mr-6</strong> class.
</p>
</body>
</html>
