Spacing

Spacing scale system

Spacing System

Podo UI provides 14 spacing levels from 0 to 13. Use consistent spacing to create visual rhythm and organize layouts.

Spacing Values

All available spacing values:

s(0)

s(1)

2px

s(2)

4px

s(3)

8px

s(4)

12px

s(5)

16px

s(6)

24px

s(7)

32px

s(8)

40px

s(9)

48px

s(10)

64px

s(11)

80px

s(12)

96px

s(13)

160px

Using in SCSS

You can apply spacing using the s() function in SCSS modules:

component.module.scss

@use 'podo-ui/mixin' as *;

.container {
  // 마진
  margin: s(4);           // 12px
  margin-top: s(5);       // 16px
  margin-bottom: s(6);    // 24px

  // 패딩
  padding: s(3) s(5);     // 8px 16px
  padding-left: s(4);     // 12px

  // 간격
  gap: s(3);              // 8px

  // 여러 속성에 사용
  border-width: s(1);     // 2px
  min-height: s(10);      // 64px
}

Using with CSS Classes

You can directly apply classes to HTML elements:

HTML

<!-- 마진 -->
<div class="m-4">Margin 12px</div>
<div class="m-t-5">Margin Top 16px</div>
<div class="m-b-6">Margin Bottom 24px</div>
<div class="m-l-4">Margin Left 12px</div>
<div class="m-r-4">Margin Right 12px</div>

<!-- 패딩 -->
<div class="p-4">Padding 12px</div>
<div class="p-t-5">Padding Top 16px</div>
<div class="p-b-6">Padding Bottom 24px</div>
<div class="p-l-4">Padding Left 12px</div>
<div class="p-r-4">Padding Right 12px</div>

Live Examples:

Padding 12px (p-4)

Padding 24px (p-6)

Padding 40px (p-8)

Border Radius

Podo UI provides 8 border radius values. Use the r() function:

r(0)

r(1)

2px

r(2)

4px

r(3)

6px

r(4)

8px

r(5)

12px

r(6)

20px

r(full)

9999px

Border Radius SCSS Usage

component.module.scss

@use 'podo-ui/mixin' as *;

.card {
  border-radius: r(4);    // 8px
}

.button {
  border-radius: r(2);    // 4px
}

.avatar {
  border-radius: r(full); // 9999px (원형)
}

.input {
  border-radius: r(3);    // 6px
}

.modal {
  border-radius: r(5);    // 12px
}

Border Radius CSS Classes

HTML

<div class="r-0">No Radius</div>
<div class="r-2">Radius 4px</div>
<div class="r-4">Radius 8px</div>
<div class="r-full">Radius Full (원형)</div>

Live Examples:

r-0

r-2 (4px)

r-4 (8px)

r-6 (20px)

r-full

Practical Example

Card component example using spacing and border radius together:

component.module.scss

@use 'podo-ui/mixin' as *;

.card {
  padding: s(6);
  margin-bottom: s(5);
  border-radius: r(4);
  background: color(bg-modal);
  border: 1px solid color(default-outline);

  .cardHeader {
    margin-bottom: s(4);
    padding-bottom: s(3);
    border-bottom: 1px solid color(default-outline);
  }

  .cardTitle {
    @include display6;
    margin-bottom: s(2);
  }

  .cardContent {
    @include p3;
    line-height: 1.6;
  }

  .cardFooter {
    margin-top: s(5);
    padding-top: s(4);
    border-top: 1px solid color(default-outline);
    display: flex;
    gap: s(3);
  }
}

Live Rendering:

Card Title

This card applies consistent spacing using the s() function and rounds corners using the r() function. All spacing follows design system values.

Tip: Using a consistent spacing system creates visually stable layouts. Always use design system values instead of arbitrary pixel values.