# Spacing

The Spacing system provides utility classes for controlling margins and padding. It includes both fixed sizes and decimal values to handle precise spacing needs.

Available spacing sizes and their pixel values

[View Size Documentation](/framework/docs/size)  

### Margin Utilities

Control element margins using these utility classes. Each class follows the pattern `{property}--{size}` and supports responsive modifiers for **Size** [Size](/framework/docs/size) , **Orientation**, and **Size + Orientation** [Responsive](/framework/docs/responsive) .

`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 using these utility classes. Each class follows the pattern `{property}--{size}`. See [Size](/framework/docs/size) for sizing tokens.

`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

Previous

[Size Define exact width and height dimensions for elements](/framework/docs/size)

Next

[Gap Set precise spacing between elements with predefined gap values](/framework/docs/gap)