Nuclear css padding properties

Padding

Sets all the padding properties in one declaration.

• 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 not allowed.

.p-0 { padding: 0; }
.p-1 { padding: var(--white-space-1); }
.p-2 { padding: var(--white-space-2); }
.p-3 { padding: var(--white-space-3); }
.p-4 { padding: var(--white-space-4); }

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

Padding x-axis

Sets the left and right padding properties.

.px-0 { padding-right: 0; padding-left: 0; }
.px-1 { padding-right: var(--white-space-1); padding-left: var(--white-space-1); }
.px-2 { padding-right: var(--white-space-2); padding-left: var(--white-space-2); }
.px-3 { padding-right: var(--white-space-3); padding-left: var(--white-space-3); }
.px-4 { padding-right: var(--white-space-4); padding-left: var(--white-space-4); }

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

Padding y-axis

Sets the top and bottom padding properties.

.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: var(--white-space-1); padding-bottom: var(--white-space-1); }
.py-2 { padding-top: var(--white-space-2); padding-bottom: var(--white-space-2); }
.py-3 { padding-top: var(--white-space-3); padding-bottom: var(--white-space-3); }
.py-4 { padding-top: var(--white-space-4); padding-bottom: var(--white-space-4); }

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

Variables

Defining negative spaces

• number - A unit to specify the padding.

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