new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Tailwind CSS · Utilities reference · all subjects

scroll-margin

10 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

scroll-margin utility classes and CSS output

Tailwind provides scroll-margin utilities that map to CSS properties as follows: scroll-m maps to scroll-margin, scroll-mx maps to scroll-margin-inline, scroll-my maps to scroll-margin-block, scroll-ms maps to scroll-margin-inline-start, scroll-me maps to scroll-margin-inline-end, scroll-mbs maps to scroll-margin-block-start, scroll-mbe maps to scroll-margin-block-end, scroll-mt maps to scroll-margin-top, scroll-mr maps to scroll-margin-right, scroll-mb maps to scroll-margin-bottom, and scroll-ml maps to scroll-margin-left. Each prefix supports numeric modifiers using the spacing scale (e.g., scroll-ml-4 produces scroll-margin-left: calc(var(--spacing) * 4)), px modifiers (e.g., scroll-ml-px produces scroll-margin-left: 1px), negative values with dash prefix (e.g., -scroll-ml-6 produces scroll-margin-left: calc(var(--spacing) * -6)), custom property syntax (e.g., scroll-ml-(<custom-property>) produces scroll-margin-left: var(<custom-property>)), and arbitrary value syntax (e.g., scroll-ml-[<value>] produces scroll-margin-left: <value>).

scroll-margin for snap containers

The scroll-margin utilities control the scroll offset around items in a snap container. Use scroll-mt-<number>, scroll-mr-<number>, scroll-mb-<number>, and scroll-ml-<number> utilities to set scroll offsets on individual items within a snap container.

Negative scroll-margin values

To use a negative scroll margin value, prefix the class name with a dash. For example, -scroll-ml-6 converts the scroll margin to a negative value.

scroll-margin logical properties

The scroll-ms-<number> utility sets scroll-margin-inline-start and the scroll-me-<number> utility sets scroll-margin-inline-end. These logical properties map to either the left or right side based on text direction. The scroll-mbs-<number> and scroll-mbe-<number> utilities set scroll-margin-block-start and scroll-margin-block-end respectively, which map to top or bottom based on writing mode.

scroll-margin basic example

Example showing scroll-margin usage in a snap container: ```html <div class="snap-x ..."> <div class="snap-start scroll-ml-6 ..."> <img src="/img/vacation-01.jpg"/> </div> <div class="snap-start scroll-ml-6 ..."> <img src="/img/vacation-02.jpg"/> </div> <div class="snap-start scroll-ml-6 ..."> <img src="/img/vacation-03.jpg"/> </div> <div class="snap-start scroll-ml-6 ..."> <img src="/img/vacation-04.jpg"/> </div> <div class="snap-start scroll-ml-6 ..."> <img src="/img/vacation-05.jpg"/> </div> </div> ```

scroll-margin negative values example

Example showing negative scroll margin usage: ```html <div class="snap-start -scroll-ml-6 ..."> <!-- ... --> </div> ```

scroll-margin logical properties example

Example showing scroll-margin logical properties usage with directional awareness: ```html <!-- Left-to-right --> <div dir="ltr"> <div class="snap-x ..."> <div class="snap-start scroll-ms-6 ..."> <img src="/img/vacation-01.jpg"/> </div> <!-- ... --> </div> </div> <!-- Right-to-left --> <div dir="rtl"> <div class="snap-x ..."> <div class="snap-start scroll-ms-6 ..."> <img src="/img/vacation-01.jpg"/> </div> <!-- ... --> </div> </div> ```

scroll-margin responsive design

scroll-margin utilities support responsive design variants. They can be prefixed with responsive breakpoints to apply different scroll margin values at different screen sizes.

scroll-margin customization uses spacing scale

The scroll-margin utilities can be customized through the theme's spacing scale. All scroll-margin utilities (scroll-m, scroll-mx, scroll-my, scroll-ms, scroll-me, scroll-mbs, scroll-mbe, scroll-mt, scroll-mr, scroll-mb, scroll-ml) use the same spacing scale for their numeric values.

scroll-margin arbitrary values

scroll-margin utilities support arbitrary values using bracket notation. For example, scroll-ml-[24rem] applies scroll-margin-left: 24rem. Custom properties can also be used with the syntax scroll-ml-(<custom-property>).

Give your agent this brain