# Negative Values

Apply a negative value with a minus sign after the colon, which toggles the sign.

## Use Negative Values

Put a minus sign in front of the value, after the colon: `ml:-4` is a margin of `-1rem`.

Only properties that accept a negative value take one: margins, positioning, z-index, letter spacing, text indent, order, grid lines, scroll margins, outline & underline offsets, rotate, scale, translate, skew & transition delay. On any other utility the class is refused, so `p:-4` & `w:-4` produce nothing.

## Margin

Use negative margins to overlap elements or create unique layouts. Negative margins are available for all margin utilities (`m:`, `mt:`, `mr:`, `mb:`, `ml:`, `mx:` & `my:`).

```tsx "ml:-4"
<div className="zi:10 …">A</div>
<div className="ml:-4 zi:20 …">B</div>
<div className="ml:-4 zi:30 …">C</div>
```

## Positioning

Apply negative offsets to position elements outside their parents or create overlapping effects. This works with the `t:`, `r:`, `b:`, `l:` & `i:` utilities.

```tsx "t:-4" "l:-4"
<div className="p:r …">
  <div className="p:a t:-4 l:-4 …"></div>
</div>
```

## Z-Index

Negative z-index values allow you to place elements behind their siblings or parents. Use `zi:-(value)` to target negative stack levels.

```tsx "zi:-10"
<div className="p:r …">
  <div className="p:a zi:-10 …"></div>
  <span>Background Layer</span>
</div>
```

## Sign Toggle

The minus sign flips the sign of the utility's value, which matters for utilities whose value is already negative.

### Letter Spacing

Utilities like `ls:1` & `ls:2` are defined with negative CSS values. Using the sign-toggle syntax `ls:-1` or `ls:-2` flips these to positive values, resulting in wider spacing instead of tighter spacing.

| Class | Standard Value | Negated Class | Negated Value |
| - | - | - | - |
| `ls:0` | `0` | `ls:-0` | `0` |
| `ls:1` | `-0.05 em` | `ls:-1` | `0.05 em` |
| `ls:2` | `-0.025 em` | `ls:-2` | `0.025 em` |
| `ls:3` | `0.025 em` | `ls:-3` | `-0.025 em` |
| `ls:4` | `0.05 em` | `ls:-4` | `-0.05 em` |
| `ls:5` | `0.1 em` | `ls:-5` | `-0.1 em` |

> Sign-toggle behavior applies to any utility where the defined CSS value
> already starts with a negative number.

```tsx "ls:1" "ls:-1"
<p className="ls:1 …">Standard (Tight)</p>
<p className="ls:-1 …">Negated (Wide)</p>
```