Spacing
Utility classes for margin and padding. They take the Fixed Sizes from the Size page, including decimal steps like 0.5 and 2.5 for the cases where a whole step is too coarse. Arbitrary pixel values and dynamic sizes are not supported.
Spacing uses the Fixed Sizes scale and its pixel values
Margin Utilities
Control element margins with {property}--{size}, where {size} is a Fixed Size. Each class supports responsive modifiers for Size
Size
Size
Define exact width and height dimensions for elements
Utility classes for width and height. Fixed sizes, arbitrary values, dynamic sizes, and container query units, each also available as a min or max constraint and with responsive variants.
, Orientation, and Size + Orientation
Responsive
Responsive
Adapt styles to the device's size class, orientation, and bit depth using variant prefixes
The Responsive system adapts a layout to the device it renders on. Size-based breakpoints follow the size class each device carries, and Bit-depth variants follow its color capabilities. Combine them to control how your content appears across TRMNL's range of devices.
.
Any other value, such as m--[Npx] or mx--auto, does nothing and the element keeps the margin it already had.
m--{size}
All sides margin
mt--{size}
Top margin
mr--{size}
Right margin
mb--{size}
Bottom margin
ml--{size}
Left margin
mx--{size}
Horizontal margin
my--{size}
Vertical margin
md:my--{size}
Size-based example
portrait:mx--{size}
Orientation-based example
lg:portrait:mt--{size}
Size + Orientation example
Padding Utilities
Control element padding with {property}--{size}, where {size} is a Fixed Size. Responsive modifiers work the same as for margin.
Any other value, such as pl--[Npx] or p--full, does nothing and the element keeps the padding it already had.
p--{size}
All sides padding
pt--{size}
Top padding
pr--{size}
Right padding
pb--{size}
Bottom padding
pl--{size}
Left padding
px--{size}
Horizontal padding
py--{size}
Vertical padding
sm:px--{size}
Size-based example
portrait:pb--{size}
Orientation-based example
md:portrait:pt--{size}
Size + Orientation example
Related Tokens
These tokens are automatically mapped to this page by token prefix.
| Token | 1-bit | 2-bit | Density 2x | 4-bit and up |
|---|---|---|---|---|
--gap-large
|
20px | - | - | - |
--gap-medium
|
16px | - | - | - |
--gap-small
|
7px | - | - | - |
--gap-xlarge
|
30px | - | - | - |
--gap-xsmall
|
5px | - | - | - |
--gap-xxlarge
|
40px | - | - | - |
--list-gap-small
|
8px | - | - | - |