ContextQMD
Back to Tailwindcss

Margin

src/docs/margin.mdx

latest13.0 KB
Original Source

import dedent from "dedent"; import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourSpacingScale, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { Stripes } from "@/components/stripes.tsx";

export const title = "margin"; export const description = "Utilities for controlling an element's margin.";

<ApiTable rows={[ ...[ ["m", "margin"], ["mx", "margin-inline"], ["my", "margin-block"], ["ms", "margin-inline-start"], ["me", "margin-inline-end"], ["mbs", "margin-block-start"], ["mbe", "margin-block-end"], ["mt", "margin-top"], ["mr", "margin-right"], ["mb", "margin-bottom"], ["ml", "margin-left"], ].flatMap(([prefix, property]) => [ [${prefix}-<number>, ${property}: calc(var(--spacing) * <number>);], [-${prefix}-<number>, ${property}: calc(var(--spacing) * -<number>);], [${prefix}-auto, ${property}: auto;], [${prefix}-px, ${property}: 1px;], [-${prefix}-px, ${property}: -1px;], [${prefix}-(<custom-property>), ${property}: var(<custom-property>);], [${prefix}-[<value>], ${property}: <value>;], ]), ...[ ["space-x", "margin-inline"], ["space-y", "margin-block"], ].flatMap(([prefix, property]) => [ [ ${prefix}-<number>, dedent& > :not(:last-child) { --tw-${prefix}-reverse: 0; ${property}-start: calc(calc(var(--spacing) * <number>) * var(--tw-${prefix}-reverse)); ${property}-end: calc(calc(var(--spacing) * <number>) * calc(1 - var(--tw-${prefix}-reverse))); };, ], [ -${prefix}-<number>, dedent& > :not(:last-child) { --tw-${prefix}-reverse: 0; ${property}-start: calc(calc(var(--spacing) * -<number>) * var(--tw-${prefix}-reverse)); ${property}-end: calc(calc(var(--spacing) * -<number>) * calc(1 - var(--tw-${prefix}-reverse))); };, ], [ ${prefix}-px, dedent& > :not(:last-child) { --tw-${prefix}-reverse: 0; ${property}-start: calc(1px * var(--tw-${prefix}-reverse)); ${property}-end: calc(1px * calc(1 - var(--tw-${prefix}-reverse))); };, ], [ -${prefix}-px, dedent& > :not(:last-child) { --tw-${prefix}-reverse: 0; ${property}-start: calc(-1px * var(--tw-${prefix}-reverse)); ${property}-end: calc(-1px * calc(1 - var(--tw-${prefix}-reverse))); };, ], [ ${prefix}-(<custom-property>), dedent& > :not(:last-child) { --tw-${prefix}-reverse: 0; ${property}-start: calc(var(<custom-property>) * var(--tw-${prefix}-reverse)); ${property}-end: calc(var(<custom-property>) * calc(1 - var(--tw-${prefix}-reverse))); };, ], [ ${prefix}-[<value>], dedent& > :not(:last-child) { --tw-${prefix}-reverse: 0; ${property}-start: calc(<value> * var(--tw-${prefix}-reverse)); ${property}-end: calc(<value> * calc(1 - var(--tw-${prefix}-reverse))); };, ], ]), [ "space-x-reverse", dedent& > :not(:last-child)) { --tw-space-x-reverse: 1; }, ], [ "space-y-reverse", dedent& > :not(:last-child)) { --tw-space-y-reverse: 1; }, ],

]} />

Examples

Basic example

Use m-<number> utilities like m-4 and m-8 to control the margin on all sides of an element:

<Figure> <Example> { <div className="flex justify-center font-mono text-sm leading-6 font-bold text-white"> <div className="relative flow-root rounded-lg"> <div className="absolute inset-0"> <Stripes border className="h-full rounded-lg" /> </div> <div className="relative m-8 rounded-lg bg-blue-500 p-4">m-8</div> </div> </div> } </Example>
html
<!-- [!code classes:m-8] -->
<div class="m-8 ...">m-8</div>
</Figure>

Adding margin to a single side

Use mt-<number>, mr-<number>, mb-<number>, and ml-<number> utilities like ml-2 and mt-6 to control the margin on one side of an element:

<Figure> <Example padding={false}> { <div className="relative h-56 font-mono text-sm leading-6 font-bold text-white"> <div className="absolute top-0 left-1/2 -translate-x-1/2 md:-ml-24"> <div className="relative pt-6"> <Stripes border="x" className="absolute inset-0 rounded-b-lg" /> <div className="relative rounded-lg bg-purple-500 p-4">mt-6</div> </div> </div> <div className="absolute top-1/2 right-0 -translate-y-1/2"> <div className="relative pr-4"> <Stripes border="y" className="absolute inset-0 rounded-l-lg" /> <div className="relative rounded-lg bg-purple-500 p-4">mr-4</div> </div> </div> <div className="absolute bottom-0 left-1/2 -translate-x-1/2 md:ml-24"> <div className="relative pb-8"> <Stripes border="x" className="absolute inset-0 rounded-t-lg" /> <div className="relative rounded-lg bg-purple-500 p-4">mb-8</div> </div> </div> <div className="absolute top-1/2 left-0 -translate-y-1/2"> <div className="relative pl-2"> <Stripes border="y" className="absolute inset-0 rounded-r-lg" /> <div className="relative rounded-lg bg-purple-500 p-4">ml-2</div> </div> </div> </div> } </Example>
html
<!-- [!code classes:mt-6,mr-4,mb-8,ml-2] -->
<div class="mt-6 ...">mt-6</div>
<div class="mr-4 ...">mr-4</div>
<div class="mb-8 ...">mb-8</div>
<div class="ml-2 ...">ml-2</div>
</Figure>

Adding horizontal margin

Use mx-<number> utilities like mx-4 and mx-8 to control the horizontal margin of an element:

<Figure> <Example> { <div className="flex justify-center font-mono text-sm leading-6 font-bold text-white"> <div className="relative rounded-lg"> <div className="absolute inset-0"> <Stripes border className="h-full rounded-lg" /> </div> <div className="relative mx-8 rounded-lg bg-indigo-500 p-4">mx-8</div> </div> </div> } </Example>
html
<!-- [!code classes:mx-8] -->
<div class="mx-8 ...">mx-8</div>
</Figure>

Adding vertical margin

Use my-<number> utilities like my-4 and my-8 to control the vertical margin of an element:

<Figure> <Example> { <div className="flex justify-center font-mono text-sm leading-6 font-bold text-white"> <div className="relative flow-root rounded-lg"> <div className="absolute inset-0"> <Stripes border className="h-full rounded-lg" /> </div> <div className="relative my-8 rounded-lg bg-pink-500 p-4">my-8</div> </div> </div> } </Example>
html
<!-- [!code classes:my-8] -->
<div class="my-8 ...">my-8</div>
</Figure>

Using negative values

To use a negative margin value, prefix the class name with a dash to convert it to a negative value:

<Figure> <Example> { <div className="flex justify-center font-mono text-sm leading-6 font-bold text-white"> <div className="flex flex-col items-center"> <div className="relative h-16 w-36 overflow-hidden rounded-md border border-sky-700/10 bg-sky-400/20"></div> <div className="relative -mt-8 flex items-center justify-center rounded-md bg-sky-500 p-4">-mt-8</div> </div> </div> } </Example>
html
<!-- [!code classes:-mt-8] -->
<div class="h-16 w-36 bg-sky-400 opacity-20 ..."></div>
<div class="-mt-8 bg-sky-300 ...">-mt-8</div>
</Figure>

Using logical properties

Use ms-<number> or me-<number> utilities like ms-4 and me-8 to set the margin-inline-start and margin-inline-end logical properties:

<Figure> <Example> { <div className="grid grid-cols-2 place-items-center gap-x-4"> <div className="flex flex-col items-start gap-y-4" dir="ltr"> <p className="text-sm font-medium">Left-to-right</p> <div className="relative flex rounded-lg font-mono text-sm leading-6 font-bold text-white"> <Stripes border className="absolute min-h-full w-full rounded-lg" /> <div className="relative ms-8 rounded-lg bg-indigo-500 p-4">ms-8</div> </div> <div className="relative mt-4 flex rounded-lg font-mono text-sm leading-6 font-bold text-white"> <Stripes border className="absolute min-h-full w-full rounded-lg" /> <div className="relative me-8 rounded-lg bg-indigo-500 p-4">me-8</div> </div> </div> <div className="flex flex-col items-start gap-y-4" dir="rtl"> <p className="text-sm font-medium">Right-to-left</p> <div className="relative flex rounded-lg font-mono text-sm leading-6 font-bold text-white"> <Stripes border className="absolute min-h-full w-full rounded-lg" /> <div className="relative ms-8 rounded-lg bg-indigo-500 p-4">ms-8</div> </div> <div className="relative mt-4 flex rounded-lg font-mono text-sm leading-6 font-bold text-white"> <Stripes border className="absolute min-h-full w-full rounded-lg" /> <div className="relative me-8 rounded-lg bg-indigo-500 p-4">me-8</div> </div> </div> </div> } </Example>
html
<!-- [!code classes:ms-8,me-8] -->
<!-- [!code word:dir="ltr"] -->
<!-- [!code word:dir="rtl"] -->
<div>
  <div dir="ltr">
    <div class="ms-8 ...">ms-8</div>
    <div class="me-8 ...">me-8</div>
  </div>
  <div dir="rtl">
    <div class="ms-8 ...">ms-8</div>
    <div class="me-8 ...">me-8</div>
  </div>
</div>
</Figure>

Use the mbs-<number> and mbe-<number> utilities to set the margin-block-start and margin-block-end logical properties, which map to either the top or bottom side based on the writing mode:

html
<!-- [!code classes:mbs-8] -->
<div class="mbs-8 ...">mbs-8</div>

Adding space between children

Use space-x-<number> or space-y-<number> utilities like space-x-4 and space-y-8 to control the space between elements:

<Figure> <Example> { <div className="flex justify-start font-mono text-sm leading-6 font-bold text-white"> <div className="relative flex space-x-4 rounded-lg"> <div className="absolute inset-0"> <Stripes border="y" className="h-full rounded-lg" /> </div> <div className="relative flex h-14 w-14 items-center justify-center rounded-lg bg-fuchsia-500">01</div> <div className="relative flex h-14 w-14 items-center justify-center rounded-lg bg-fuchsia-500">02</div> <div className="relative flex h-14 w-14 items-center justify-center rounded-lg bg-fuchsia-500">03</div> </div> </div> } </Example>
html
<!-- [!code classes:space-x-4] -->
<div class="flex space-x-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
</Figure>

Reversing children order

If your elements are in reverse order (using say flex-row-reverse or flex-col-reverse), use the space-x-reverse or space-y-reverse utilities to ensure the space is added to the correct side of each element:

<Figure> <Example> { <div className="flex justify-end font-mono text-sm leading-6 font-bold text-white"> <div className="relative flex flex-row-reverse space-x-4 space-x-reverse rounded-lg"> <div className="absolute inset-0"> <Stripes border="y" className="h-full rounded-lg" /> </div> <div className="relative flex h-14 w-14 items-center justify-center rounded-lg bg-cyan-500">01</div> <div className="relative flex h-14 w-14 items-center justify-center rounded-lg bg-cyan-500">02</div> <div className="relative flex h-14 w-14 items-center justify-center rounded-lg bg-cyan-500">03</div> </div> </div> } </Example>
html
<!-- [!code classes:flex-row-reverse,space-x-4,space-x-reverse] -->
<div class="flex flex-row-reverse space-x-4 space-x-reverse ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
</Figure>

Limitations

The space utilities are really just a shortcut for adding margin to all-but-the-last-item in a group, and aren't designed to handle complex cases like grids, layouts that wrap, or situations where the children are rendered in a complex custom order rather than their natural DOM order.

For those situations, it's better to use the gap utilities when possible, or add margin to every element with a matching negative margin on the parent.

Additionally, the space utilities are not designed to work together with the divide utilities. For those situations, consider adding margin/padding utilities to the children instead.

Using a custom value

<UsingACustomValue utilities={["m", "mx", "mb"]} name="margin" variable="margin" value="5px" />

Responsive design

<ResponsiveDesign property="margin" defaultClass="mt-4" featuredClass="mt-8" />

Customizing your theme

<CustomizingYourSpacingScale utilities={["m", "mx", "my", "ms", "me", "mbs", "mbe", "mt", "mr", "mb", "ml"]} />