Margin

Set physical outer spacing, including supported negative values and auto margins.

Use margin to add space outside an element’s border. It changes the space around the element in normal layout; padding adds room inside its border, while gap belongs to the parent layout container.

Quick reference

Example class	Expected declarations
`m-4`	`margin-top: 1rem; margin-right: 1rem; margin-bottom: 1rem; margin-left: 1rem;`
`mx-8`	`margin-left: 2rem; margin-right: 2rem;`
`my-2`	`margin-top: 0.5rem; margin-bottom: 0.5rem;`
`mt-2`	`margin-top: 0.5rem;`
`mr-4`	`margin-right: 1rem;`
`mb-6`	`margin-bottom: 1.5rem;`
`ml-8`	`margin-left: 2rem;`

Example setup

The examples explicitly use spacingUnit: "0.25rem", reset: "none", strict mode and no breakpoints. Numeric suffixes multiply that unit, so m-4 emits 1rem on each physical side. No Tailwind scale or theme is inherited. wind-demo classes provide only the visible frames and cards; their CSS is shown with each preview.

Examples in use

Add room outside every side

m-4 leaves 1rem between the card border and the dashed frame on all four sides.

Add room outside every side

HTML

<div class="wind-demo wind-demo-frame">
  <div class="wind-demo-card m-4">m-4 · 1rem around the card</div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  display: flow-root;
  width: 20rem;
  min-height: 9rem;
  border: 2px dashed #849bb3;
  background: #eef3f8;
}

.wind-demo-card {
  width: 8rem;
  min-height: 3rem;
  border: 1px solid #59718b;
  background: #dce8f2;
  text-align: center;
}
.m-4 {
  margin-top: 1rem;
  margin-right: 1rem;
  margin-bottom: 1rem;
  margin-left: 1rem;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-card": true
    },
    "safelist": {
      "docs-preview": [
        "m-4"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { display: flow-root; width: 20rem; min-height: 9rem; border: 2px dashed #849bb3; background: #eef3f8; }
.wind-demo-card { width: 8rem; min-height: 3rem; border: 1px solid #59718b; background: #dce8f2; text-align: center; }

Set horizontal and vertical margins

mx-8 adds 2rem on the left and right; my-2 adds 0.5rem on the top and bottom.

Set horizontal and vertical margins

HTML

<div class="wind-demo wind-demo-frame wind-demo-axis-frame">
  <div class="wind-demo-card wind-demo-axis-card mx-8 my-2">mx-8 · my-2</div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  display: flow-root;
  min-height: 9rem;
  border: 2px dashed #849bb3;
  background: #eef3f8;
}

.wind-demo-axis-frame {
  width: 20rem;
}

.wind-demo-card {
  width: 8rem;
  min-height: 3rem;
  border: 1px solid #59718b;
  background: #dce8f2;
  text-align: center;
}

.wind-demo-axis-card {
  min-height: 5rem;
}
.mx-8 {
  margin-left: 2rem;
  margin-right: 2rem;
}
.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-axis-frame": true,
      "wind-demo-card": true,
      "wind-demo-axis-card": true
    },
    "safelist": {
      "docs-preview": [
        "mx-8",
        "my-2"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { display: flow-root; min-height: 9rem; border: 2px dashed #849bb3; background: #eef3f8; }
.wind-demo-axis-frame { width: 20rem; }
.wind-demo-card { width: 8rem; min-height: 3rem; border: 1px solid #59718b; background: #dce8f2; text-align: center; }
.wind-demo-axis-card { min-height: 5rem; }

Adjust each physical edge

The four cards use mt, mr, mb and ml so each physical side can be read independently.

Adjust each physical edge

HTML

<div class="wind-demo wind-demo-frame wind-demo-edge-frame">
  <div class="wind-demo-card mt-2">mt-2 · top</div>
  <div class="wind-demo-card mr-4">mr-4 · right</div>
  <div class="wind-demo-card mb-6">mb-6 · bottom</div>
  <div class="wind-demo-card ml-8">ml-8 · left</div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  display: flow-root;
  min-height: 16rem;
  border: 2px dashed #849bb3;
  background: #eef3f8;
}

.wind-demo-edge-frame {
  width: 22rem;
}

.wind-demo-card {
  width: 8rem;
  min-height: 2.5rem;
  border: 1px solid #59718b;
  background: #dce8f2;
  text-align: center;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.ml-8 {
  margin-left: 2rem;
}
.mr-4 {
  margin-right: 1rem;
}
.mt-2 {
  margin-top: 0.5rem;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-edge-frame": true,
      "wind-demo-card": true
    },
    "safelist": {
      "docs-preview": [
        "mb-6",
        "ml-8",
        "mr-4",
        "mt-2"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { display: flow-root; min-height: 16rem; border: 2px dashed #849bb3; background: #eef3f8; }
.wind-demo-edge-frame { width: 22rem; }
.wind-demo-card { width: 8rem; min-height: 2.5rem; border: 1px solid #59718b; background: #dce8f2; text-align: center; }

Pull an element into nearby space

Negative top and left margins reduce the element’s normal-flow space and let it overlap the card above.

Pull an element into nearby space

HTML

<div class="wind-demo wind-demo-frame wind-demo-negative-frame">
  <div class="wind-demo-card">Normal flow</div>
  <div class="wind-demo-card wind-demo-negative-card -mt-3 -ml-4">-mt-3 · -ml-4</div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  display: flow-root;
  width: 20rem;
  min-height: 10rem;
  border: 2px dashed #849bb3;
  background: #eef3f8;
}

.wind-demo-card {
  width: 10rem;
  min-height: 3rem;
  border: 1px solid #59718b;
  background: #dce8f2;
  text-align: center;
}

.wind-demo-negative-card {
  background: #c6d8e9;
}
.-ml-4 {
  margin-left: -1rem;
}
.-mt-3 {
  margin-top: -0.75rem;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-negative-frame": true,
      "wind-demo-card": true,
      "wind-demo-negative-card": true
    },
    "safelist": {
      "docs-preview": [
        "-ml-4",
        "-mt-3"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { display: flow-root; width: 20rem; min-height: 10rem; border: 2px dashed #849bb3; background: #eef3f8; }
.wind-demo-card { width: 10rem; min-height: 3rem; border: 1px solid #59718b; background: #dce8f2; text-align: center; }
.wind-demo-negative-card { background: #c6d8e9; }

Center a fixed-width block

mx-auto divides the available horizontal margin equally around the 10rem card.

Center a fixed-width block

HTML

<div class="wind-demo wind-demo-frame wind-demo-auto-frame">
  <div class="wind-demo-card wind-demo-auto-card mx-auto">mx-auto · centered block</div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  display: flow-root;
  min-height: 9rem;
  border: 2px dashed #849bb3;
  background: #eef3f8;
}

.wind-demo-auto-frame {
  width: 22rem;
}

.wind-demo-card {
  min-height: 3rem;
  border: 1px solid #59718b;
  background: #dce8f2;
  text-align: center;
}

.wind-demo-auto-card {
  width: 10rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-auto-frame": true,
      "wind-demo-card": true,
      "wind-demo-auto-card": true
    },
    "safelist": {
      "docs-preview": [
        "mx-auto"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { display: flow-root; min-height: 9rem; border: 2px dashed #849bb3; background: #eef3f8; }
.wind-demo-auto-frame { width: 22rem; }
.wind-demo-card { min-height: 3rem; border: 1px solid #59718b; background: #dce8f2; text-align: center; }
.wind-demo-auto-card { width: 10rem; }

Name a reusable margin

The example explicitly configures tokens.spacing.section to 1.5rem.

Name a reusable margin

HTML

<div class="wind-demo wind-demo-frame">
  <div class="wind-demo-card m-section">m-section · 1.5rem around the card</div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-section: 1.5rem;
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  display: flow-root;
  width: 20rem;
  min-height: 10rem;
  border: 2px dashed #849bb3;
  background: #eef3f8;
}

.wind-demo-card {
  width: 8rem;
  min-height: 3rem;
  border: 1px solid #59718b;
  background: #dce8f2;
  text-align: center;
}
.m-section {
  margin-top: var(--zw-spacing-section);
  margin-right: var(--zw-spacing-section);
  margin-bottom: var(--zw-spacing-section);
  margin-left: var(--zw-spacing-section);
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem",
      "spacing": {
        "section": "1.5rem"
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-card": true
    },
    "safelist": {
      "docs-preview": [
        "m-section"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { display: flow-root; width: 20rem; min-height: 10rem; border: 2px dashed #849bb3; background: #eef3f8; }
.wind-demo-card { width: 8rem; min-height: 3rem; border: 1px solid #59718b; background: #dce8f2; text-align: center; }

Use a one-off length

mt-[18px] sets only the physical top margin to 18px.

Use a one-off length

HTML

<div class="wind-demo wind-demo-frame">
  <div class="wind-demo-card mt-[18px]">mt-[18px] · one-off length</div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  display: flow-root;
  width: 20rem;
  min-height: 9rem;
  border: 2px dashed #849bb3;
  background: #eef3f8;
}

.wind-demo-card {
  width: 8rem;
  min-height: 3rem;
  border: 1px solid #59718b;
  background: #dce8f2;
  text-align: center;
}
.mt-\[18px\] {
  margin-top: 18px;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-card": true
    },
    "safelist": {
      "docs-preview": [
        "mt-[18px]"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { display: flow-root; width: 20rem; min-height: 9rem; border: 2px dashed #849bb3; background: #eef3f8; }
.wind-demo-card { width: 8rem; min-height: 3rem; border: 1px solid #59718b; background: #dce8f2; text-align: center; }

Custom and named values

m-0 removes margin and m-px uses 1px without a spacing token. Other numeric suffixes need tokens.spacingUnit. Named values such as m-section need tokens.spacing; arbitrary values such as mt-[18px] do not. Margin roots use physical sides: mx means left and right, my means top and bottom, and mt/mr/mb/ml name one edge. They do not follow writing direction. Margin accepts negative values by putting a dash before the root, such as -mt-3; padding and gap do not. It also accepts auto: mx-auto centers a fixed-width block when horizontal space is available, while vertical auto margins need a layout context that distributes free space.

Related guides: Utility grammar · Variants

Catalog details

m

Field	Value
Catalog identifier	`v1.m`
Class pattern	`m-<suffix>`
Grammar	`{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"margin-top","allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`3`
Token categories	`spacing`
Negative-value policy	`allowed`
Conflict group and rank	`margin` (`10`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`margin-top`, `margin-right`, `margin-bottom`, `margin-left`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"0"`	`"0"`
`keyword`	`"px"`	`"1px"`
`keyword`	`"auto"`	`"auto"`

Declaration templates

Property	Value kind	Fixed value
`margin-top`	`resolved`	`null`
`margin-right`	`resolved`	`null`
`margin-bottom`	`resolved`	`null`
`margin-left`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`m-0`	`margin-top: 0`; `margin-right: 0`; `margin-bottom: 0`; `margin-left: 0`

mx

Field	Value
Catalog identifier	`v1.mx`
Class pattern	`mx-<suffix>`
Grammar	`{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"margin-left","allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`3`
Token categories	`spacing`
Negative-value policy	`allowed`
Conflict group and rank	`margin` (`10`)
Order rank	`1`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`margin-left`, `margin-right`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"0"`	`"0"`
`keyword`	`"px"`	`"1px"`
`keyword`	`"auto"`	`"auto"`

Declaration templates

Property	Value kind	Fixed value
`margin-left`	`resolved`	`null`
`margin-right`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`mx-0`	`margin-left: 0`; `margin-right: 0`

my

Field	Value
Catalog identifier	`v1.my`
Class pattern	`my-<suffix>`
Grammar	`{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"margin-top","allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`3`
Token categories	`spacing`
Negative-value policy	`allowed`
Conflict group and rank	`margin` (`10`)
Order rank	`1`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`margin-top`, `margin-bottom`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"0"`	`"0"`
`keyword`	`"px"`	`"1px"`
`keyword`	`"auto"`	`"auto"`

Declaration templates

Property	Value kind	Fixed value
`margin-top`	`resolved`	`null`
`margin-bottom`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`my-0`	`margin-top: 0`; `margin-bottom: 0`

mb

Field	Value
Catalog identifier	`v1.mb`
Class pattern	`mb-<suffix>`
Grammar	`{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"margin-bottom","allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`3`
Token categories	`spacing`
Negative-value policy	`allowed`
Conflict group and rank	`margin` (`10`)
Order rank	`2`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`margin-bottom`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"0"`	`"0"`
`keyword`	`"px"`	`"1px"`
`keyword`	`"auto"`	`"auto"`

Declaration templates

Property	Value kind	Fixed value
`margin-bottom`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`mb-0`	`margin-bottom: 0`

ml

Field	Value
Catalog identifier	`v1.ml`
Class pattern	`ml-<suffix>`
Grammar	`{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"margin-left","allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`3`
Token categories	`spacing`
Negative-value policy	`allowed`
Conflict group and rank	`margin` (`10`)
Order rank	`2`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`margin-left`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"0"`	`"0"`
`keyword`	`"px"`	`"1px"`
`keyword`	`"auto"`	`"auto"`

Declaration templates

Property	Value kind	Fixed value
`margin-left`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`ml-0`	`margin-left: 0`

mr

Field	Value
Catalog identifier	`v1.mr`
Class pattern	`mr-<suffix>`
Grammar	`{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"margin-right","allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`3`
Token categories	`spacing`
Negative-value policy	`allowed`
Conflict group and rank	`margin` (`10`)
Order rank	`2`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`margin-right`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"0"`	`"0"`
`keyword`	`"px"`	`"1px"`
`keyword`	`"auto"`	`"auto"`

Declaration templates

Property	Value kind	Fixed value
`margin-right`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`mr-0`	`margin-right: 0`

mt

Field	Value
Catalog identifier	`v1.mt`
Class pattern	`mt-<suffix>`
Grammar	`{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"margin-top","allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`3`
Token categories	`spacing`
Negative-value policy	`allowed`
Conflict group and rank	`margin` (`10`)
Order rank	`2`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`margin-top`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"0"`	`"0"`
`keyword`	`"px"`	`"1px"`
`keyword`	`"auto"`	`"auto"`

Declaration templates

Property	Value kind	Fixed value
`margin-top`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`mt-0`	`margin-top: 0`

Margin

Quick reference

Examples in use

Add room outside every side

Set horizontal and vertical margins

Adjust each physical edge

Pull an element into nearby space

Center a fixed-width block

Name a reusable margin

Use a one-off length

Custom and named values

m

Accepted values

Declaration templates

Catalog examples

mx

Accepted values

Declaration templates

Catalog examples

my

Accepted values

Declaration templates

Catalog examples

mb

Accepted values

Declaration templates

Catalog examples

ml

Accepted values

Declaration templates

Catalog examples

mr

Accepted values

Declaration templates

Catalog examples

mt

Accepted values

Declaration templates

Catalog examples

Revision History