Skip to main content

Spacing

The spacing utility was updated in 2026.01.2 to support logical properties alongside physical ones. See the logical properties example.

The custom specifiers horizontal, vertical, and around are deprecated. See Deprecated for details.

Usage

Use spacing utilities to apply margin and padding consistently across the system.

Use the pattern env-{property}-{specifier}--{size}, or use the shorthand
env-{property}--{size} to apply spacing to all sides.

Valid values

{property}

  • m margin
  • p padding

{specifier}

Physical and logical properties are both supported. Logical properties are recommended for spacing within components and internationalized content, while physical properties remain useful for overall layout and dimensions.

  • top
  • right
  • bottom
  • left
  • block-start
  • inline-end
  • block-end
  • inline-start
  • block block-start & block-end shorthand
  • inline inline-start & inline-end shorthand
  • {omitted} block and inline shorthand

{size}

  • 0 No margin
  • a auto, only applicable to margin
  • xxx-small (0.125em)
  • xx-small (0.25em)
  • x-small (0.5em)
  • small (0.75em)
  • medium (1em)
  • large (1.25em)
  • x-large (1.5em)
  • xx-large (1.75em)
  • xxx-large (2em)

Negative margin

Negative margin is applied by combining a size class with the --negative modifier. Negative values are only available for margin.

Example:

<div class="env-m-inline--large env-m-inline--negative">...</div>

Spacing examples

env-m--medium
env-p--medium
env-m-inline--xxx-large
env-p-block--large
env-m-inline--large
env-m-inline--negative
env-m-block--medium
env-p--small
env-m-block-start--negative
env-m-block-start--medium
env-m-inline-end--medium
env-m-block-end--small
env-m-inline-start--xxx-large
env-p--medium
env-w--50
env-m-block--medium
env-m-inline--a
env-p--medium

Logical properties example

Logical properties are based on the content’s writing flow instead of physical sides. This allows spacing to adapt naturally to different languages and writing modes.

All of the examples below use the same classes:

env-m-block-start--medium, env-p--x-small, env-p-block-start--0, env-p-inline-end--xx-large

We believe in making the complex simple.
نحن نؤمن بضرورة تبسيط الأمور المعقدة.
私たちは複雑なものをシンプルにすることに取り組んでいます。

Read more about CSS logical properties and values (MDN) .

Deprecated

Since 2026.02.1, the following custom specifiers are deprecated:

  • horizontal use inline for direction-aware spacing, or left and right for physical spacing
  • vertical use block for direction-aware spacing, or top and bottom for physical spacing
  • around use the shorthand by omitting the specifier

Envision documentation