Nuclear css margin properties

Margin

Sets all the margin properties for an element.

• length - Specifies a margin in px, pt, cm, etc. Default value is 0.
• % - Specifies a margin in percent of the width of the containing element.
• auto - The browser calculates a margin.

Note: Negative values are allowed.

.m-a { margin: auto; }
.m-0 { margin: 0; }
.m-1 { margin: var(--white-space-1); }
.m-2 { margin: var(--white-space-2); }
.m-3 { margin: var(--white-space-3); }
.m-4 { margin: var(--white-space-4); }

<div>
  <div class="m-1">content 1</div>
  <div class="m-1">content 2</div>
  <div class="m-1">content 3</div>
</div>

Margin top

Sets the margin-top properties for an element.

.mt-a { margin-top: auto; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--white-space-1); }
.mt-2 { margin-top: var(--white-space-2); }
.mt-3 { margin-top: var(--white-space-3); }
.mt-4 { margin-top: var(--white-space-4); }

<div class="mt-1">
  <div>content 1</div>
  <div>content 2</div>
  <div>content 3</div>
</div>

Margin right

Sets the margin-right properties for an element.

.mr-a { margin-right: auto; }
.mr-0 { margin-right: 0; }
.mr-1 { margin-right: var(--white-space-1); }
.mr-2 { margin-right: var(--white-space-2); }
.mr-3 { margin-right: var(--white-space-3); }
.mr-4 { margin-right: var(--white-space-4); }

<div>
  <div class="mr-1">content 1</div>
  <div class="mr-1">content 2</div>
  <div>content 3</div>
</div>

Margin bottom

Sets the margin-bottom properties for an element.

.mb-a { margin-bottom: auto; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--white-space-1); }
.mb-2 { margin-bottom: var(--white-space-2); }
.mb-3 { margin-bottom: var(--white-space-3); }
.mb-4 { margin-bottom: var(--white-space-4); }

<div class="mb-1">
  <div>content 1</div>
  <div>content 2</div>
  <div>content 3</div>
</div>

Margin left

Sets the margin-left properties for an element.

.ml-a { margin-left: auto; }
.ml-0 { margin-left: 0; }
.ml-1 { margin-left: var(--white-space-1); }
.ml-2 { margin-left: var(--white-space-2); }
.ml-3 { margin-left: var(--white-space-3); }
.ml-4 { margin-left: var(--white-space-4); }

<div>
  <div>content 1</div>
  <div class="ml-1">content 2</div>
  <div class="ml-1">content 3</div>
</div>

Margin x-axis

Sets the right and left margin of an element.

.mx-a { margin-right: auto; margin-left: auto; }
.mx-0 { margin-right: 0; margin-left: 0; }
.mx-1 { margin-right: var(--white-space-1); margin-left: var(--white-space-1); }
.mx-2 { margin-right: var(--white-space-2); margin-left: var(--white-space-2); }
.mx-3 { margin-right: var(--white-space-3); margin-left: var(--white-space-3); }
.mx-4 { margin-right: var(--white-space-4); margin-left: var(--white-space-4); }

<div class="mx-a">
  <div>content 1</div>
  <div>content 2</div>
  <div>content 3</div>
</div>

Variables

Defining negative spaces

• number - A unit to specify the margin.

:root {
  --white-space-1: .5rem;
  --white-space-2: 1rem;
  --white-space-3: 2rem;
  --white-space-4: 4rem;
}