Spacing

margin

Name: Fynydd
Address: 630 Freedom Business Center Drive, King of Prussia, Pennsylvania, 19406, United States
Telephone: +1 855-439-6933
Rating: 4.9

Utilities for setting the margin around elements.

Quick reference

Margin

Class Styles

m-px

margin: 1px;

-m-px

margin: -1px;

m-auto

margin: auto;

mx-px

margin-inline: 1px;

-mx-px

margin-inline: -1px;

mx-auto

margin-inline: auto;

my-px

margin-block: 1px;

-my-px

margin-block: -1px;

my-auto

margin-block: auto;

ms-px

margin-inline-start: 1px;

-ms-px

margin-inline-start: -1px;

ms-auto

margin-inline-start: auto;

me-px

margin-inline-end: 1px;

-me-px

margin-inline-end: -1px;

me-auto

margin-inline-end: auto;

mt-px

margin-top: 1px;

-mt-px

margin-top: -1px;

mt-auto

margin-top: auto;

mr-px

margin-right: 1px;

-mr-px

margin-right: -1px;

mr-auto

margin-right: auto;

mb-px

margin-bottom: 1px;

-mb-px

margin-bottom: -1px;

mb-auto

margin-bottom: auto;

ml-px

margin-left: 1px;

-ml-px

margin-left: -1px;

ml-auto

margin-left: auto;

m-<number>

margin: calc(var(--spacing) * <number>);/* 0.25rem */

m-4

margin: calc(var(--spacing) * 4);

m-<fraction>

margin: <percentage>;

m-1/2

margin: 50%;

m-[<value>]

margin: <value>;

m-[1rem]

margin: 1rem;

m-(<custom-property>)

margin: var(<custom-property>);

m-(--my-length)

margin: var(--my-length);

m-(length:<custom-property>)

margin: var(<custom-property>);

m-(length:--my-length)

margin: var(--my-length);

-m-<number>

margin: calc(var(--spacing) * -<number>);/* 0.25rem */

-m-4

margin: calc(var(--spacing) * -4);

-m-<fraction>

margin: calc(<percentage> * -1);

-m-1/2

margin: calc(50% * -1);

mx-<number>

margin-inline: calc(var(--spacing) * <number>);/* 0.25rem */

mx-4

margin-inline: calc(var(--spacing) * 4);

mx-<fraction>

margin-inline: <percentage>;

mx-1/2

margin-inline: 50%;

mx-[<value>]

margin-inline: <value>;

mx-[1rem]

margin-inline: 1rem;

mx-(<custom-property>)

margin-inline: var(<custom-property>);

mx-(--my-length)

margin-inline: var(--my-length);

mx-(length:<custom-property>)

margin-inline: var(<custom-property>);

mx-(length:--my-length)

margin-inline: var(--my-length);

-mx-<number>

margin-inline: calc(var(--spacing) * -<number>);/* 0.25rem */

-mx-4

margin-inline: calc(var(--spacing) * -4);

-mx-<fraction>

margin-inline: calc(<percentage> * -1);

-mx-1/2

margin-inline: calc(50% * -1);

my-<number>

margin-block: calc(var(--spacing) * <number>);/* 0.25rem */

my-4

margin-block: calc(var(--spacing) * 4);

my-<fraction>

margin-block: <percentage>;

my-1/2

margin-block: 50%;

my-[<value>]

margin-block: <value>;

my-[1rem]

margin-block: 1rem;

my-(<custom-property>)

margin-block: var(<custom-property>);

my-(--my-length)

margin-block: var(--my-length);

my-(length:<custom-property>)

margin-block: var(<custom-property>);

my-(length:--my-length)

margin-block: var(--my-length);

-my-<number>

margin-block: calc(var(--spacing) * -<number>);/* 0.25rem */

-my-4

margin-block: calc(var(--spacing) * -4);

-my-<fraction>

margin-block: calc(<percentage> * -1);

-my-1/2

margin-block: calc(50% * -1);

ms-<number>

margin-inline-start: calc(var(--spacing) * <number>);/* 0.25rem */

ms-4

margin-inline-start: calc(var(--spacing) * 4);

ms-<fraction>

margin-inline-start: <percentage>;

ms-1/2

margin-inline-start: 50%;

ms-[<value>]

margin-inline-start: <value>;

ms-[1rem]

margin-inline-start: 1rem;

ms-(<custom-property>)

margin-inline-start: var(<custom-property>);

ms-(--my-length)

margin-inline-start: var(--my-length);

ms-(length:<custom-property>)

margin-inline-start: var(<custom-property>);

ms-(length:--my-length)

margin-inline-start: var(--my-length);

-ms-<number>

margin-inline-start: calc(var(--spacing) * -<number>);/* 0.25rem */

-ms-4

margin-inline-start: calc(var(--spacing) * -4);

-ms-<fraction>

margin-inline-start: calc(<percentage> * -1);

-ms-1/2

margin-inline-start: calc(50% * -1);

me-<number>

margin-inline-end: calc(var(--spacing) * <number>);/* 0.25rem */

me-4

margin-inline-end: calc(var(--spacing) * 4);

me-<fraction>

margin-inline-end: <percentage>;

me-1/2

margin-inline-end: 50%;

me-[<value>]

margin-inline-end: <value>;

me-[1rem]

margin-inline-end: 1rem;

me-(<custom-property>)

margin-inline-end: var(<custom-property>);

me-(--my-length)

margin-inline-end: var(--my-length);

me-(length:<custom-property>)

margin-inline-end: var(<custom-property>);

me-(length:--my-length)

margin-inline-end: var(--my-length);

-me-<number>

margin-inline-end: calc(var(--spacing) * -<number>);/* 0.25rem */

-me-4

margin-inline-end: calc(var(--spacing) * -4);

-me-<fraction>

margin-inline-end: calc(<percentage> * -1);

-me-1/2

margin-inline-end: calc(50% * -1);

mt-<number>

margin-top: calc(var(--spacing) * <number>);/* 0.25rem */

mt-4

margin-top: calc(var(--spacing) * 4);

mt-<fraction>

margin-top: <percentage>;

mt-1/2

margin-top: 50%;

mt-[<value>]

margin-top: <value>;

mt-[1rem]

margin-top: 1rem;

mt-(<custom-property>)

margin-top: var(<custom-property>);

mt-(--my-length)

margin-top: var(--my-length);

mt-(length:<custom-property>)

margin-top: var(<custom-property>);

mt-(length:--my-length)

margin-top: var(--my-length);

-mt-<number>

margin-top: calc(var(--spacing) * -<number>);/* 0.25rem */

-mt-4

margin-top: calc(var(--spacing) * -4);

-mt-<fraction>

margin-top: calc(<percentage> * -1);

-mt-1/2

margin-top: calc(50% * -1);

mr-<number>

margin-right: calc(var(--spacing) * <number>);/* 0.25rem */

mr-4

margin-right: calc(var(--spacing) * 4);

mr-<fraction>

margin-right: <percentage>;

mr-1/2

margin-right: 50%;

mr-[<value>]

margin-right: <value>;

mr-[1rem]

margin-right: 1rem;

mr-(<custom-property>)

margin-right: var(<custom-property>);

mr-(--my-length)

margin-right: var(--my-length);

mr-(length:<custom-property>)

margin-right: var(<custom-property>);

mr-(length:--my-length)

margin-right: var(--my-length);

-mr-<number>

margin-right: calc(var(--spacing) * -<number>);/* 0.25rem */

-mr-4

margin-right: calc(var(--spacing) * -4);

-mr-<fraction>

margin-right: calc(<percentage> * -1);

-mr-1/2

margin-right: calc(50% * -1);

mb-<number>

margin-bottom: calc(var(--spacing) * <number>);/* 0.25rem */

mb-4

margin-bottom: calc(var(--spacing) * 4);

mb-<fraction>

margin-bottom: <percentage>;

mb-1/2

margin-bottom: 50%;

mb-[<value>]

margin-bottom: <value>;

mb-[1rem]

margin-bottom: 1rem;

mb-(<custom-property>)

margin-bottom: var(<custom-property>);

mb-(--my-length)

margin-bottom: var(--my-length);

mb-(length:<custom-property>)

margin-bottom: var(<custom-property>);

mb-(length:--my-length)

margin-bottom: var(--my-length);

-mb-<number>

margin-bottom: calc(var(--spacing) * -<number>);/* 0.25rem */

-mb-4

margin-bottom: calc(var(--spacing) * -4);

-mb-<fraction>

margin-bottom: calc(<percentage> * -1);

-mb-1/2

margin-bottom: calc(50% * -1);

ml-<number>

margin-left: calc(var(--spacing) * <number>);/* 0.25rem */

ml-4

margin-left: calc(var(--spacing) * 4);

ml-<fraction>

margin-left: <percentage>;

ml-1/2

margin-left: 50%;

ml-[<value>]

margin-left: <value>;

ml-[1rem]

margin-left: 1rem;

ml-(<custom-property>)

margin-left: var(<custom-property>);

ml-(--my-length)

margin-left: var(--my-length);

ml-(length:<custom-property>)

margin-left: var(<custom-property>);

ml-(length:--my-length)

margin-left: var(--my-length);

-ml-<number>

margin-left: calc(var(--spacing) * -<number>);/* 0.25rem */

-ml-4

margin-left: calc(var(--spacing) * -4);

-ml-<fraction>

margin-left: calc(<percentage> * -1);

-ml-1/2

margin-left: calc(50% * -1);

Space

Class Styles

space-x-px

& > :not(:last-child) {
    margin-inline-start: calc(1px * var(--sf-space-x-reverse));/* 0 */
    margin-inline-end: calc(1px * calc(1 - var(--sf-space-x-reverse)));/* 0 */
}

-space-x-px

& > :not(:last-child) {
    margin-inline-start: calc(-1px * var(--sf-space-x-reverse));/* 0 */
    margin-inline-end: calc(-1px * calc(1 - var(--sf-space-x-reverse)));/* 0 */
}

space-y-px

& > :not(:last-child) {
    margin-block-start: calc(1px * var(--sf-space-y-reverse));/* 0 */
    margin-block-end: calc(1px * calc(1 - var(--sf-space-y-reverse)));/* 0 */
}

-space-y-px

& > :not(:last-child) {
    margin-block-start: calc(-1px * var(--sf-space-y-reverse));/* 0 */
    margin-block-end: calc(-1px * calc(1 - var(--sf-space-y-reverse)));/* 0 */
}

space-x-<number>

& > :not(:last-child) {
    margin-inline-start: calc(calc(var(--spacing) * <number>) * var(--sf-space-x-reverse));/* 0.25rem, 0 */
    margin-inline-end: calc(calc(var(--spacing) * <number>) * calc(1 - var(--sf-space-x-reverse)));/* 0.25rem, 0 */
}

space-x-4

& > :not(:last-child) {
    margin-inline-start: calc(calc(var(--spacing) * 4) * var(--sf-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--sf-space-x-reverse)));
}

space-x-<fraction>

& > :not(:last-child) {
    margin-inline-start: calc(<percentage> * var(--sf-space-x-reverse));/* 0 */
    margin-inline-end: calc(<percentage> * calc(1 - var(--sf-space-x-reverse)));/* 0 */
}

space-x-1/2

& > :not(:last-child) {
    margin-inline-start: calc(50% * var(--sf-space-x-reverse));
    margin-inline-end: calc(50% * calc(1 - var(--sf-space-x-reverse)));
}

space-x-[<value>]

& > :not(:last-child) {
    margin-inline-start: calc(<value> * var(--sf-space-x-reverse));/* 0 */
    margin-inline-end: calc(<value> * calc(1 - var(--sf-space-x-reverse)));/* 0 */
}

space-x-[1rem]

& > :not(:last-child) {
    margin-inline-start: calc(1rem * var(--sf-space-x-reverse));
    margin-inline-end: calc(1rem * calc(1 - var(--sf-space-x-reverse)));
}

space-x-(<custom-property>)

& > :not(:last-child) {
    margin-inline-start: calc(var(<custom-property>) * var(--sf-space-x-reverse));/* 0 */
    margin-inline-end: calc(var(<custom-property>) * calc(1 - var(--sf-space-x-reverse)));/* 0 */
}

space-x-(--my-length)

& > :not(:last-child) {
    margin-inline-start: calc(var(--my-length) * var(--sf-space-x-reverse));
    margin-inline-end: calc(var(--my-length) * calc(1 - var(--sf-space-x-reverse)));
}

space-x-(length:<custom-property>)

& > :not(:last-child) {
    margin-inline-start: calc(var(<custom-property>) * var(--sf-space-x-reverse));/* 0 */
    margin-inline-end: calc(var(<custom-property>) * calc(1 - var(--sf-space-x-reverse)));/* 0 */
}

space-x-(length:--my-length)

& > :not(:last-child) {
    margin-inline-start: calc(var(--my-length) * var(--sf-space-x-reverse));
    margin-inline-end: calc(var(--my-length) * calc(1 - var(--sf-space-x-reverse)));
}

-space-x-<number>

& > :not(:last-child) {
    margin-inline-start: calc(calc(var(--spacing) * -<number>) * var(--sf-space-x-reverse));/* 0.25rem, 0 */
    margin-inline-end: calc(calc(var(--spacing) * -<number>) * calc(1 - var(--sf-space-x-reverse)));/* 0.25rem, 0 */
}

-space-x-4

& > :not(:last-child) {
    margin-inline-start: calc(calc(var(--spacing) * -4) * var(--sf-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * -4) * calc(1 - var(--sf-space-x-reverse)));
}

-space-x-<fraction>

& > :not(:last-child) {
    margin-inline-start: calc(-1 * <percentage> * var(--sf-space-x-reverse));/* 0 */
    margin-inline-end: calc(-1 * <percentage> * calc(1 - var(--sf-space-x-reverse)));/* 0 */
}

-space-x-1/2

& > :not(:last-child) {
    margin-inline-start: calc(-1 * 50% * var(--sf-space-x-reverse));
    margin-inline-end: calc(-1 * 50% * calc(1 - var(--sf-space-x-reverse)));
}

space-y-<number>

& > :not(:last-child) {
    margin-block-start: calc(calc(var(--spacing) * <number>) * var(--sf-space-y-reverse));/* 0.25rem, 0 */
    margin-block-end: calc(calc(var(--spacing) * <number>) * calc(1 - var(--sf-space-y-reverse)));/* 0.25rem, 0 */
}

space-y-4

& > :not(:last-child) {
    margin-block-start: calc(calc(var(--spacing) * 4) * var(--sf-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--sf-space-y-reverse)));
}

space-y-<fraction>

& > :not(:last-child) {
    margin-block-start: calc(<percentage> * var(--sf-space-y-reverse));/* 0 */
    margin-block-end: calc(<percentage> * calc(1 - var(--sf-space-y-reverse)));/* 0 */
};

space-y-1/2

& > :not(:last-child) {
    margin-block-start: calc(50% * var(--sf-space-y-reverse));
    margin-block-end: calc(50% * calc(1 - var(--sf-space-y-reverse)));
};

space-y-[<value>]

& > :not(:last-child) {
    margin-block-start: calc(<value> * var(--sf-space-y-reverse));/* 0 */
    margin-block-end: calc(<value> * calc(1 - var(--sf-space-y-reverse)));/* 0 */
};

space-y-[1rem]

& > :not(:last-child) {
    margin-block-start: calc(1rem * var(--sf-space-y-reverse));
    margin-block-end: calc(1rem * calc(1 - var(--sf-space-y-reverse)));
};

space-y-(<custom-property>)

& > :not(:last-child) {
    margin-block-start: calc(var(<custom-property>) * var(--sf-space-y-reverse));/* 0 */
    margin-block-end: calc(var(<custom-property>) * calc(1 - var(--sf-space-y-reverse)));/* 0 */
};

space-y-(--my-length)

& > :not(:last-child) {
    margin-block-start: calc(var(--my-length) * var(--sf-space-y-reverse));
    margin-block-end: calc(var(--my-length) * calc(1 - var(--sf-space-y-reverse)));
};

space-y-(length:<custom-property>)

& > :not(:last-child) {
    margin-block-start: calc(var(<custom-property>) * var(--sf-space-y-reverse));/* 0 */
    margin-block-end: calc(var(<custom-property>) * calc(1 - var(--sf-space-y-reverse)));/* 0 */
};

space-y-(length:--my-length)

& > :not(:last-child) {
    margin-block-start: calc(var(--my-length) * var(--sf-space-y-reverse));
    margin-block-end: calc(var(--my-length) * calc(1 - var(--sf-space-y-reverse)));
};

-space-y-<number>

& > :not(:last-child) {
    margin-block-start: calc(calc(var(--spacing) * -<number>) * var(--sf-space-y-reverse));/* 0.25rem, 0 */
    margin-block-end: calc(calc(var(--spacing) * -<number>) * calc(1 - var(--sf-space-y-reverse)));/* 0.25rem, 0 */
}

-space-y-4

& > :not(:last-child) {
    margin-block-start: calc(calc(var(--spacing) * -4) * var(--sf-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * -4) * calc(1 - var(--sf-space-y-reverse)));
}

-space-y-<fraction>

& > :not(:last-child) {
    margin-block-start: calc(-1 * <percentage> * var(--sf-space-y-reverse));/* 0 */
    margin-block-end: calc(-1 * <percentage> * calc(1 - var(--sf-space-y-reverse)));/* 0 */
}

-space-y-1/2

& > :not(:last-child) {
    margin-block-start: calc(-1 * 50% * var(--sf-space-y-reverse));
    margin-block-end: calc(-1 * 50% * calc(1 - var(--sf-space-y-reverse)));
}

width,height

padding

Spacing

margin

Quick reference

Margin

Space

Sfumato

Community