Scroll Margin

Set the scroll margin for snapping & alignment.

baselinewidely

Class	CSS
sm:0	scroll-margin: 0;
sm:1	scroll-margin: .25rem;
sm:2	scroll-margin: .5rem;
sm:3	scroll-margin: .75rem;
sm:4	scroll-margin: 1rem;
sm:5	scroll-margin: 1.25rem;
sm:6	scroll-margin: 1.5rem;
sm:7	scroll-margin: 1.75rem;
sm:8	scroll-margin: 2rem;
sm:9	scroll-margin: 2.25rem;
sm:10	scroll-margin: 2.5rem;
sm:11	scroll-margin: 2.75rem;
sm:12	scroll-margin: 3rem;
sm:13	scroll-margin: 3.25rem;
sm:14	scroll-margin: 3.5rem;
sm:15	scroll-margin: 3.75rem;
sm:16	scroll-margin: 4rem;
sm:17	scroll-margin: 4.25rem;
sm:18	scroll-margin: 4.5rem;
sm:19	scroll-margin: 4.75rem;
sm:20	scroll-margin: 5rem;
sm:21	scroll-margin: 5.25rem;
sm:22	scroll-margin: 5.5rem;
sm:23	scroll-margin: 5.75rem;
sm:24	scroll-margin: 6rem;
sm:25	scroll-margin: 6.25rem;
sm:26	scroll-margin: 6.5rem;
sm:27	scroll-margin: 6.75rem;
sm:28	scroll-margin: 7rem;
sm:29	scroll-margin: 7.25rem;
sm:30	scroll-margin: 7.5rem;
sm:31	scroll-margin: 7.75rem;
sm:32	scroll-margin: 8rem;
sm:33	scroll-margin: 8.25rem;
sm:34	scroll-margin: 8.5rem;
sm:35	scroll-margin: 8.75rem;
sm:36	scroll-margin: 9rem;
sm:37	scroll-margin: 9.25rem;
sm:38	scroll-margin: 9.5rem;
sm:39	scroll-margin: 9.75rem;
sm:40	scroll-margin: 10rem;
sm:41	scroll-margin: 10.25rem;
sm:42	scroll-margin: 10.5rem;
sm:43	scroll-margin: 10.75rem;
sm:44	scroll-margin: 11rem;
sm:45	scroll-margin: 11.25rem;
sm:46	scroll-margin: 11.5rem;
sm:47	scroll-margin: 11.75rem;
sm:48	scroll-margin: 12rem;
sm:49	scroll-margin: 12.25rem;
sm:50	scroll-margin: 12.5rem;
sm:51	scroll-margin: 12.75rem;
sm:52	scroll-margin: 13rem;
sm:53	scroll-margin: 13.25rem;
sm:54	scroll-margin: 13.5rem;
sm:55	scroll-margin: 13.75rem;
sm:56	scroll-margin: 14rem;
sm:57	scroll-margin: 14.25rem;
sm:58	scroll-margin: 14.5rem;
sm:59	scroll-margin: 14.75rem;
sm:60	scroll-margin: 15rem;
sm:61	scroll-margin: 15.25rem;
sm:62	scroll-margin: 15.5rem;
sm:63	scroll-margin: 15.75rem;
sm:64	scroll-margin: 16rem;
sm:65	scroll-margin: 16.25rem;
sm:66	scroll-margin: 16.5rem;
sm:67	scroll-margin: 16.75rem;
sm:68	scroll-margin: 17rem;
sm:69	scroll-margin: 17.25rem;
sm:70	scroll-margin: 17.5rem;
sm:71	scroll-margin: 17.75rem;
sm:72	scroll-margin: 18rem;
sm:73	scroll-margin: 18.25rem;
sm:74	scroll-margin: 18.5rem;
sm:75	scroll-margin: 18.75rem;
sm:76	scroll-margin: 19rem;
sm:77	scroll-margin: 19.25rem;
sm:78	scroll-margin: 19.5rem;
sm:79	scroll-margin: 19.75rem;
sm:80	scroll-margin: 20rem;
sm:81	scroll-margin: 20.25rem;
sm:82	scroll-margin: 20.5rem;
sm:83	scroll-margin: 20.75rem;
sm:84	scroll-margin: 21rem;
sm:85	scroll-margin: 21.25rem;
sm:86	scroll-margin: 21.5rem;
sm:87	scroll-margin: 21.75rem;
sm:88	scroll-margin: 22rem;
sm:89	scroll-margin: 22.25rem;
sm:90	scroll-margin: 22.5rem;
sm:91	scroll-margin: 22.75rem;
sm:92	scroll-margin: 23rem;
sm:93	scroll-margin: 23.25rem;
sm:94	scroll-margin: 23.5rem;
sm:95	scroll-margin: 23.75rem;
sm:96	scroll-margin: 24rem;
sm:97	scroll-margin: 24.25rem;
sm:98	scroll-margin: 24.5rem;
sm:99	scroll-margin: 24.75rem;
sm:100	scroll-margin: 25rem;
sm:101	scroll-margin: 25.25rem;
sm:102	scroll-margin: 25.5rem;
sm:103	scroll-margin: 25.75rem;
sm:104	scroll-margin: 26rem;
sm:105	scroll-margin: 26.25rem;
sm:106	scroll-margin: 26.5rem;
sm:107	scroll-margin: 26.75rem;
sm:108	scroll-margin: 27rem;
sm:109	scroll-margin: 27.25rem;
sm:110	scroll-margin: 27.5rem;
sm:111	scroll-margin: 27.75rem;
sm:112	scroll-margin: 28rem;
sm:113	scroll-margin: 28.25rem;
sm:114	scroll-margin: 28.5rem;
sm:115	scroll-margin: 28.75rem;
sm:116	scroll-margin: 29rem;
sm:117	scroll-margin: 29.25rem;
sm:118	scroll-margin: 29.5rem;
sm:119	scroll-margin: 29.75rem;
sm:120	scroll-margin: 30rem;
sm:121	scroll-margin: 30.25rem;
sm:122	scroll-margin: 30.5rem;
sm:123	scroll-margin: 30.75rem;
sm:124	scroll-margin: 31rem;
sm:125	scroll-margin: 31.25rem;
sm:126	scroll-margin: 31.5rem;
sm:127	scroll-margin: 31.75rem;
sm:128	scroll-margin: 32rem;
sm:129	scroll-margin: 32.25rem;
sm:130	scroll-margin: 32.5rem;
sm:131	scroll-margin: 32.75rem;
sm:132	scroll-margin: 33rem;
sm:133	scroll-margin: 33.25rem;
sm:134	scroll-margin: 33.5rem;
sm:135	scroll-margin: 33.75rem;
sm:136	scroll-margin: 34rem;
sm:137	scroll-margin: 34.25rem;
sm:138	scroll-margin: 34.5rem;
sm:139	scroll-margin: 34.75rem;
sm:140	scroll-margin: 35rem;
sm:141	scroll-margin: 35.25rem;
sm:142	scroll-margin: 35.5rem;
sm:143	scroll-margin: 35.75rem;
sm:144	scroll-margin: 36rem;
sm:145	scroll-margin: 36.25rem;
sm:146	scroll-margin: 36.5rem;
sm:147	scroll-margin: 36.75rem;
sm:148	scroll-margin: 37rem;
sm:149	scroll-margin: 37.25rem;
sm:150	scroll-margin: 37.5rem;
sm:151	scroll-margin: 37.75rem;
sm:152	scroll-margin: 38rem;
sm:153	scroll-margin: 38.25rem;
sm:154	scroll-margin: 38.5rem;
sm:155	scroll-margin: 38.75rem;
sm:156	scroll-margin: 39rem;
sm:157	scroll-margin: 39.25rem;
sm:158	scroll-margin: 39.5rem;
sm:159	scroll-margin: 39.75rem;
sm:160	scroll-margin: 40rem;
sm:161	scroll-margin: 40.25rem;
sm:162	scroll-margin: 40.5rem;
sm:163	scroll-margin: 40.75rem;
sm:164	scroll-margin: 41rem;
sm:165	scroll-margin: 41.25rem;
sm:166	scroll-margin: 41.5rem;
sm:167	scroll-margin: 41.75rem;
sm:168	scroll-margin: 42rem;
sm:169	scroll-margin: 42.25rem;
sm:170	scroll-margin: 42.5rem;
sm:171	scroll-margin: 42.75rem;
sm:172	scroll-margin: 43rem;
sm:173	scroll-margin: 43.25rem;
sm:174	scroll-margin: 43.5rem;
sm:175	scroll-margin: 43.75rem;
sm:176	scroll-margin: 44rem;
sm:177	scroll-margin: 44.25rem;
sm:178	scroll-margin: 44.5rem;
sm:179	scroll-margin: 44.75rem;
sm:180	scroll-margin: 45rem;
sm:181	scroll-margin: 45.25rem;
sm:182	scroll-margin: 45.5rem;
sm:183	scroll-margin: 45.75rem;
sm:184	scroll-margin: 46rem;
sm:185	scroll-margin: 46.25rem;
sm:186	scroll-margin: 46.5rem;
sm:187	scroll-margin: 46.75rem;
sm:188	scroll-margin: 47rem;
sm:189	scroll-margin: 47.25rem;
sm:190	scroll-margin: 47.5rem;
sm:191	scroll-margin: 47.75rem;
sm:192	scroll-margin: 48rem;
sm:193	scroll-margin: 48.25rem;
sm:194	scroll-margin: 48.5rem;
sm:195	scroll-margin: 48.75rem;
sm:196	scroll-margin: 49rem;
sm:197	scroll-margin: 49.25rem;
sm:198	scroll-margin: 49.5rem;
sm:199	scroll-margin: 49.75rem;
sm:200	scroll-margin: 50rem;
sm:201	scroll-margin: 50.25rem;
sm:202	scroll-margin: 50.5rem;
sm:203	scroll-margin: 50.75rem;
sm:204	scroll-margin: 51rem;
sm:205	scroll-margin: 51.25rem;
sm:206	scroll-margin: 51.5rem;
sm:207	scroll-margin: 51.75rem;
sm:208	scroll-margin: 52rem;
sm:209	scroll-margin: 52.25rem;
sm:210	scroll-margin: 52.5rem;
sm:211	scroll-margin: 52.75rem;
sm:212	scroll-margin: 53rem;
sm:213	scroll-margin: 53.25rem;
sm:214	scroll-margin: 53.5rem;
sm:215	scroll-margin: 53.75rem;
sm:216	scroll-margin: 54rem;
sm:217	scroll-margin: 54.25rem;
sm:218	scroll-margin: 54.5rem;
sm:219	scroll-margin: 54.75rem;
sm:220	scroll-margin: 55rem;
sm:221	scroll-margin: 55.25rem;
sm:222	scroll-margin: 55.5rem;
sm:223	scroll-margin: 55.75rem;
sm:224	scroll-margin: 56rem;
sm:225	scroll-margin: 56.25rem;
sm:226	scroll-margin: 56.5rem;
sm:227	scroll-margin: 56.75rem;
sm:228	scroll-margin: 57rem;
sm:229	scroll-margin: 57.25rem;
sm:230	scroll-margin: 57.5rem;
sm:231	scroll-margin: 57.75rem;
sm:232	scroll-margin: 58rem;
sm:233	scroll-margin: 58.25rem;
sm:234	scroll-margin: 58.5rem;
sm:235	scroll-margin: 58.75rem;
sm:236	scroll-margin: 59rem;
sm:237	scroll-margin: 59.25rem;
sm:238	scroll-margin: 59.5rem;
sm:239	scroll-margin: 59.75rem;
sm:240	scroll-margin: 60rem;
sm:241	scroll-margin: 60.25rem;
sm:242	scroll-margin: 60.5rem;
sm:243	scroll-margin: 60.75rem;
sm:244	scroll-margin: 61rem;
sm:245	scroll-margin: 61.25rem;
sm:246	scroll-margin: 61.5rem;
sm:247	scroll-margin: 61.75rem;
sm:248	scroll-margin: 62rem;
sm:249	scroll-margin: 62.25rem;
sm:250	scroll-margin: 62.5rem;
sm:251	scroll-margin: 62.75rem;
sm:252	scroll-margin: 63rem;
sm:253	scroll-margin: 63.25rem;
sm:254	scroll-margin: 63.5rem;
sm:255	scroll-margin: 63.75rem;
sm:256	scroll-margin: 64rem;
sm:257	scroll-margin: 64.25rem;
sm:258	scroll-margin: 64.5rem;
sm:259	scroll-margin: 64.75rem;
sm:260	scroll-margin: 65rem;
sm:261	scroll-margin: 65.25rem;
sm:262	scroll-margin: 65.5rem;
sm:263	scroll-margin: 65.75rem;
sm:264	scroll-margin: 66rem;
sm:265	scroll-margin: 66.25rem;
sm:266	scroll-margin: 66.5rem;
sm:267	scroll-margin: 66.75rem;
sm:268	scroll-margin: 67rem;
sm:269	scroll-margin: 67.25rem;
sm:270	scroll-margin: 67.5rem;
sm:271	scroll-margin: 67.75rem;
sm:272	scroll-margin: 68rem;
sm:273	scroll-margin: 68.25rem;
sm:274	scroll-margin: 68.5rem;
sm:275	scroll-margin: 68.75rem;
sm:276	scroll-margin: 69rem;
sm:277	scroll-margin: 69.25rem;
sm:278	scroll-margin: 69.5rem;
sm:279	scroll-margin: 69.75rem;
sm:280	scroll-margin: 70rem;
sm:281	scroll-margin: 70.25rem;
sm:282	scroll-margin: 70.5rem;
sm:283	scroll-margin: 70.75rem;
sm:284	scroll-margin: 71rem;
sm:285	scroll-margin: 71.25rem;
sm:286	scroll-margin: 71.5rem;
sm:287	scroll-margin: 71.75rem;
sm:288	scroll-margin: 72rem;
sm:289	scroll-margin: 72.25rem;
sm:290	scroll-margin: 72.5rem;
sm:291	scroll-margin: 72.75rem;
sm:292	scroll-margin: 73rem;
sm:293	scroll-margin: 73.25rem;
sm:294	scroll-margin: 73.5rem;
sm:295	scroll-margin: 73.75rem;
sm:296	scroll-margin: 74rem;
sm:297	scroll-margin: 74.25rem;
sm:298	scroll-margin: 74.5rem;
sm:299	scroll-margin: 74.75rem;
sm:300	scroll-margin: 75rem;
sm:301	scroll-margin: 75.25rem;
sm:302	scroll-margin: 75.5rem;
sm:303	scroll-margin: 75.75rem;
sm:304	scroll-margin: 76rem;
sm:305	scroll-margin: 76.25rem;
sm:306	scroll-margin: 76.5rem;
sm:307	scroll-margin: 76.75rem;
sm:308	scroll-margin: 77rem;
sm:309	scroll-margin: 77.25rem;
sm:310	scroll-margin: 77.5rem;
sm:311	scroll-margin: 77.75rem;
sm:312	scroll-margin: 78rem;
sm:313	scroll-margin: 78.25rem;
sm:314	scroll-margin: 78.5rem;
sm:315	scroll-margin: 78.75rem;
sm:316	scroll-margin: 79rem;
sm:317	scroll-margin: 79.25rem;
sm:318	scroll-margin: 79.5rem;
sm:319	scroll-margin: 79.75rem;
sm:320	scroll-margin: 80rem;
sm:321	scroll-margin: 80.25rem;
sm:322	scroll-margin: 80.5rem;
sm:323	scroll-margin: 80.75rem;
sm:324	scroll-margin: 81rem;
sm:325	scroll-margin: 81.25rem;
sm:326	scroll-margin: 81.5rem;
sm:327	scroll-margin: 81.75rem;
sm:328	scroll-margin: 82rem;
sm:329	scroll-margin: 82.25rem;
sm:330	scroll-margin: 82.5rem;
sm:331	scroll-margin: 82.75rem;
sm:332	scroll-margin: 83rem;
sm:333	scroll-margin: 83.25rem;
sm:334	scroll-margin: 83.5rem;
sm:335	scroll-margin: 83.75rem;
sm:336	scroll-margin: 84rem;
sm:337	scroll-margin: 84.25rem;
sm:338	scroll-margin: 84.5rem;
sm:339	scroll-margin: 84.75rem;
sm:340	scroll-margin: 85rem;
sm:341	scroll-margin: 85.25rem;
sm:342	scroll-margin: 85.5rem;
sm:343	scroll-margin: 85.75rem;
sm:344	scroll-margin: 86rem;
sm:345	scroll-margin: 86.25rem;
sm:346	scroll-margin: 86.5rem;
sm:347	scroll-margin: 86.75rem;
sm:348	scroll-margin: 87rem;
sm:349	scroll-margin: 87.25rem;
sm:350	scroll-margin: 87.5rem;
sm:351	scroll-margin: 87.75rem;
sm:352	scroll-margin: 88rem;
sm:353	scroll-margin: 88.25rem;
sm:354	scroll-margin: 88.5rem;
sm:355	scroll-margin: 88.75rem;
sm:356	scroll-margin: 89rem;
sm:357	scroll-margin: 89.25rem;
sm:358	scroll-margin: 89.5rem;
sm:359	scroll-margin: 89.75rem;
sm:360	scroll-margin: 90rem;
sm:361	scroll-margin: 90.25rem;
sm:362	scroll-margin: 90.5rem;
sm:363	scroll-margin: 90.75rem;
sm:364	scroll-margin: 91rem;
sm:365	scroll-margin: 91.25rem;
sm:366	scroll-margin: 91.5rem;
sm:367	scroll-margin: 91.75rem;
sm:368	scroll-margin: 92rem;
sm:369	scroll-margin: 92.25rem;
sm:370	scroll-margin: 92.5rem;
sm:371	scroll-margin: 92.75rem;
sm:372	scroll-margin: 93rem;
sm:373	scroll-margin: 93.25rem;
sm:374	scroll-margin: 93.5rem;
sm:375	scroll-margin: 93.75rem;
sm:376	scroll-margin: 94rem;
sm:377	scroll-margin: 94.25rem;
sm:378	scroll-margin: 94.5rem;
sm:379	scroll-margin: 94.75rem;
sm:380	scroll-margin: 95rem;
sm:381	scroll-margin: 95.25rem;
sm:382	scroll-margin: 95.5rem;
sm:383	scroll-margin: 95.75rem;
sm:384	scroll-margin: 96rem;
sm:auto	scroll-margin: auto;
sm:px	scroll-margin: 1px;

The same values work with smb, smie, smis, sml, smr, smt, smx & smy, as in smy:4.

Variants

Prefix any class with a variant to apply it only under that condition. Variants stack, as in @md:h:sm:4.

Breakpoints

Apply a class from a viewport width up. Each breakpoint covers its width & every width above it.

@xs:sm:4	From 32rem up.
@sm:sm:4	From 40rem up.
@md:sm:4	From 48rem up.
@lg:sm:4	From 64rem up.
@xl:sm:4	From 80rem up.
@xxl:sm:4	From 96rem up.

Containers

Apply a class from a container's width up, not the viewport's. Mark the parent with ct:is first.

@c:xs:sm:4	Container from 32rem up.
@c:sm:sm:4	Container from 40rem up.
@c:md:sm:4	Container from 48rem up.
@c:lg:sm:4	Container from 64rem up.
@c:xl:sm:4	Container from 80rem up.
@c:xxl:sm:4	Container from 96rem up.

Media

Apply a class when the device or the page matches a condition, or on the first frame an element renders.

@pc:sm:4	On a touch screen.
@prm:sm:4	With reduced motion on.
@st:sm:4	On the first frame.

States

Apply a class only while the element is in a state, such as hovered, focused or checked.

h:sm:4	On :hover.
f:sm:4	On :focus.
fv:sm:4	On :focus-visible.
a:sm:4	On :active.
d:sm:4	On :disabled.
fc:sm:4	On :first-child.
c:sm:4	On :checked.
e:sm:4	On :empty.
fw:sm:4	On :focus-within.
i:sm:4	On :invalid.
in:sm:4	On :indeterminate.
lc:sm:4	On :last-child.
nc:sm:4	On :nth-child.
r:sm:4	On :required.
ro:sm:4	On :read-only.
v:sm:4	On :valid.

Pseudo Elements

Style a part of the element rather than the element itself, such as its placeholder or the selected text.

a::sm:4	On ::after.
b::sm:4	On ::before.
p::sm:4	On ::placeholder.
s::sm:4	On ::selection.

Negative

Put a minus after the colon to negate a value.

sm:-4

A minus after the colon.