Margin
Apply outer spacing to widgets using the m-* utilities. Values are multiplied by the Pixel Factor or used directly as arbitrary pixel values.
On this page
spacing/margin
The live demo is not available for this example.
margin.dart
View source
import 'package:fluttersdk_wind/fluttersdk_wind.dart';
WContainer(
className: 'm-4 bg-gray-200 dark:bg-gray-700',
child: WText('This container has 16px margin.'),
)
Basic Usage#
Margin is applied by adding an m-* class to any WContainer or widget that accepts className. The value is scaled by the Pixel Factor (default 4), so m-4 produces 16px of margin on all sides.
WContainer(
className: 'mt-4 mr-[8] ml-2 mb-[12] bg-gray-200 dark:bg-gray-700',
child: WText('Custom side-specific margin applied.'),
)
Quick Reference#
| Class | Description | Example |
|---|---|---|
m-{value} |
Margin on all sides | m-4, m-[6] |
mx-{value} |
Horizontal margin (left + right) | mx-4, mx-[6] |
my-{value} |
Vertical margin (top + bottom) | my-4, my-[6] |
mt-{value} |
Top margin | mt-4, mt-[6] |
mb-{value} |
Bottom margin | mb-4, mb-[6] |
ml-{value} |
Left margin | ml-4, ml-[6] |
mr-{value} |
Right margin | mr-4, mr-[6] |
How Values Are Calculated#
Predefined Sizes#
Margin is calculated using the size value multiplied by the Pixel Factor.
- Example:
m-4→ 4 (size) × 4 (Pixel Factor) = 16px.
Arbitrary Values#
Arbitrary sizes wrapped in brackets bypass the Pixel Factor and use the value directly in pixels.
- Example:
m-[6]→ 6px.
WContainer(
className: 'm-[10] bg-gray-200 dark:bg-gray-700',
child: WText('This container has 10px margin.'),
)
Arbitrary Values#
Use bracket notation to apply any pixel value directly without scaling. The bracket form expects a unitless integer or decimal.
WContainer(
className: 'mt-[24] mb-[8] mx-[16] bg-white dark:bg-gray-800',
child: WText('Custom arbitrary margin on each axis.'),
)
Responsive Design#
Prefix any margin class with a breakpoint to apply it only at that screen size and above.
WContainer(
className: 'm-2 md:m-4 lg:m-8 bg-gray-100 dark:bg-gray-800',
child: WText('Responsive margin.'),
)
Available breakpoints: sm, md, lg, xl, 2xl.
Customizing Theme#
Margin values are scaled by the Pixel Factor. Adjust the Pixel Factor to change the base unit for all predefined margin values.
WindTheme.setPixelFactor(3); // m-4 now produces 12px instead of 16px
See Pixel Factor for full details.
Related Documentation#
- Padding — apply inner spacing to widgets.
- Pixel Factor — configure the base unit used by spacing utilities.
- Width — control widget width.
- Height — control widget height.
- WContainer — the primary container widget that accepts margin classes.