---
url: https://bullframecss.marcopontili.com/utilities/spacing.md
---
# Spacing Utilities

Bullframe CSS provides margin and padding utilities for consistent spacing throughout your design.

## Margin Utilities

### All Sides

```html
<div class="bf-m-0">No margin</div>
<div class="bf-m-1">Small margin</div>
<div class="bf-m-2">Medium margin</div>
<div class="bf-m-3">Large margin</div>
<div class="bf-m-4">Extra large margin</div>
```

### Top Margin

```html
<div class="bf-m-t-0">No top margin</div>
<div class="bf-m-t-1">Small top margin</div>
<div class="bf-m-t-2">Medium top margin</div>
<div class="bf-m-t-3">Large top margin</div>
<div class="bf-m-t-4">Extra large top margin</div>
```

### Bottom Margin

```html
<div class="bf-m-b-0">No bottom margin</div>
<div class="bf-m-b-1">Small bottom margin</div>
<div class="bf-m-b-2">Medium bottom margin</div>
<div class="bf-m-b-3">Large bottom margin</div>
<div class="bf-m-b-4">Extra large bottom margin</div>
```

### Left Margin

```html
<div class="bf-m-l-0">No left margin</div>
<div class="bf-m-l-1">Small left margin</div>
<div class="bf-m-l-2">Medium left margin</div>
```

### Right Margin

```html
<div class="bf-m-r-0">No right margin</div>
<div class="bf-m-r-1">Small right margin</div>
<div class="bf-m-r-2">Medium right margin</div>
```

## Padding Utilities

### All Sides

```html
<div class="bf-p-0">No padding</div>
<div class="bf-p-1">Small padding</div>
<div class="bf-p-2">Medium padding</div>
<div class="bf-p-3">Large padding</div>
<div class="bf-p-4">Extra large padding</div>
```

### Top Padding

```html
<div class="bf-p-t-0">No top padding</div>
<div class="bf-p-t-1">Small top padding</div>
<div class="bf-p-t-2">Medium top padding</div>
```

### Bottom Padding

```html
<div class="bf-p-b-0">No bottom padding</div>
<div class="bf-p-b-1">Small bottom padding</div>
<div class="bf-p-b-2">Medium bottom padding</div>
```

## Spacing Scale

The spacing utilities use the following scale:

* `0` = `0`
* `1` = `--bf-spacing-md` (0.5rem)
* `2` = `--bf-spacing-lg` (1rem)
* `3` = `--bf-spacing-xl` (2rem)
* `4` = `--bf-spacing-xxl` (3rem)