Spacing
Utilities for controlling the padding and margin of elements.
On this page
spacing/padding_margin_basic
The live demo is not available for this example.
padding_margin_basic.dart
View source
// Adds 16px padding inside, 16px margin outside
WDiv(className: 'p-4 m-4 bg-white')
Basic Usage#
Control the spacing of an element using the p-{size} (padding) and m-{size} (margin) utilities.
Padding#
Padding adds space inside the element's boundary.
// Add padding to all sides
WDiv(className: 'p-6 bg-blue-100', child: WText('Padding'))
Margin#
Margin adds space outside the element's boundary.
// Add margin to all sides
WDiv(className: 'm-4 bg-red-100', child: WText('Margin'))
Quick Reference#
The default spacing scale is based on a 4px unit (baseSpacingUnit: 4.0).
| Class | Value (Default) | Description |
|---|---|---|
p-0 / m-0 |
0px | No spacing |
p-1 / m-1 |
4px | Tiny spacing |
p-2 / m-2 |
8px | Small spacing |
p-4 / m-4 |
16px | Normal spacing |
p-8 / m-8 |
32px | Large spacing |
p-16 / m-16 |
64px | Extra large spacing |
px-{n} / mx-{n} |
- | Horizontal (Left + Right) |
py-{n} / my-{n} |
- | Vertical (Top + Bottom) |
pt-{n} / mt-{n} |
- | Top only |
pr-{n} / mr-{n} |
- | Right only |
pb-{n} / mb-{n} |
- | Bottom only |
pl-{n} / ml-{n} |
- | Left only |
Variants#
Directional Spacing#
Target specific sides or axes using direction prefixes.
spacing/directional
The live demo is not available for this example.
directional.dart
View source
// Horizontal padding (Left + Right)
WDiv(className: 'px-4 bg-green-100')
// Vertical margin (Top + Bottom)
WDiv(className: 'my-6 bg-yellow-100')
// Top padding only
WDiv(className: 'pt-8 bg-purple-100')
Horizontal Centering#
Use mx-auto to center a container horizontally. This sets the left and right margins to align the element within its parent.
WDiv(
className: 'mx-auto w-32 bg-blue-500',
child: WText('Centered'),
)
Responsive Design#
Apply different spacing at different breakpoints using the standard sm:, md:, lg:, xl:, and 2xl: prefixes.
// p-4 on mobile, p-8 on medium screens, p-12 on large screens
WDiv(className: 'p-4 md:p-8 lg:p-12')
Dark Mode#
Use the dark: prefix to apply different spacing in dark mode.
WDiv(className: 'p-4 dark:p-6')
Arbitrary Values#
If the built-in scale doesn't meet your needs, use bracket notation to apply exact pixel values.
// Exact 13px padding
WDiv(className: 'p-[13px]')
// Exact 50px top margin
WDiv(className: 'mt-[50px]')
Customizing Theme#
To extend or override the default spacing scale, modify the WindThemeData in your app root.
The baseSpacingUnit controls the multiplier for all spacing utilities (p-, m-, gap-, w-, h-).
WindThemeData(
baseSpacingUnit: 8.0, // Sets 'p-1' to 8px, 'p-4' to 32px
)