원문: https://github.com/facebook/astryx/wiki/Container-Padding-System · 번역 기준: 2026-09-03

Astryx 컨테이너(Card, Section, Layout 영역)는 CSS custom property를 통해 자신의 padding을 자식에게 전달합니다. Table, Divider, Section 같은 자식 컴포넌트는 이 변수들을 사용해 "bleed" 합니다 — 컨테이너의 padding을 벗어나 edge-to-edge로 펼쳐진다는 뜻입니다.

이 페이지는 네 가지 방향별 CSS custom property와, 누가 이를 설정하고 누가 읽는지, 그리고 새 컴포넌트를 만들 때 어떻게 사용하는지를 문서화합니다.

네 가지 변수

변수 방향 용도
--container-padding-inline-start Inline start (LTR에서는 왼쪽, RTL에서는 오른쪽) Start-edge bleed 및 cell 보정
--container-padding-inline-end Inline end (LTR에서는 오른쪽, RTL에서는 왼쪽) End-edge bleed 및 cell 보정
--container-padding-block-start Block start (가로쓰기에서는 위) :first-child의 start-edge bleed
--container-padding-block-end Block end (가로쓰기에서는 아래) :last-child의 end-edge bleed

네 변수 모두 컨테이너 밖에서 읽힐 때는 0px fallback을 사용합니다. isotropic한 --container-padding, --container-padding-inline, --container-padding-block은 존재하지 않습니다 — 모든 bleed는 자신이 보정하는 edge를 읽습니다.

왜 네 가지 변수인가?

컨테이너는 모든 logical edge마다 서로 다른 padding을 칠할 수 있습니다. Layout의 header와 footer는 서로 다른 block-start / block-end 값을 사용하고, Section은 inline-end와 독립적으로 inline-start를 override할 수 있습니다. 축 단위의 단일 변수였다면 한쪽 edge가 잘못된 값을 기준으로 보정하게 됩니다.

이 분리는 RTL 동작도 보존합니다: inline-start와 inline-end는 프로토콜을 물리적인 left/right 변수로 바꾸지 않으면서 writing direction을 따라갑니다.

흐름 다이어그램

Container (Card, Section, Dialog, Layout area)
│
├── Sets --container-padding-inline-start (from paddingOuterX or theme default)
├── Sets --container-padding-inline-end   (from paddingOuterX or theme default)
├── Sets --container-padding-block-start  (from paddingOuterY or theme default)
├── Sets --container-padding-block-end    (from paddingOuterY or theme default)
│
└── Child components read them:
    │
    ├── Table
    │   ├── marginInlineStart reads --container-padding-inline-start
    │   ├── marginInlineEnd reads --container-padding-inline-end
    │   ├── width adds both inline edge values
    │   ├── marginTop (:first-child): calc(-1 * var(--container-padding-block-start, 0px))
    │   └── marginBottom (:last-child): calc(-1 * var(--container-padding-block-end, 0px))
    │
    ├── Divider (isFullBleed)
    │   ├── horizontal: each inline margin reads its matching edge
    │   └── vertical: block margins read their matching start/end edges
    │
    ├── Section (nested)
    │   ├── inline margins read their matching start/end edges
    │   ├── marginTop (:first-child) reads --container-padding-block-start
    │   └── marginBottom (:last-child) reads --container-padding-block-end
    │
    ├── Layout (outer wrapper)
    │   ├── inline margins read their matching start/end edges
    │   ├── marginBlockStart reads --container-padding-block-start
    │   ├── marginBlockEnd reads --container-padding-block-end
    │   └── fill height compensates with block-start + block-end
    │
    └── Edge compensation (ghost buttons, etc.)
        └── inline compensation follows the applicable start/end edge

Setter

container() 유틸리티

Layout/container.stylex.ts의 container() 함수가 중심 setter입니다. 네 변수를 모두 설정하는 StyleX 스타일 배열을 반환합니다.

Theme-default 경로 (명시적 padding prop이 없는 Card/Section/Dialog):

// Card reads from --astryx-card-padding, Section from --astryx-section-padding
container({ useThemeDefault: 'card' })
// Sets:
//   --container-padding-inline-start: var(--astryx-card-padding, 16px)
//   --container-padding-inline-end:   var(--astryx-card-padding, 16px)
//   --container-padding-block-start:  var(--astryx-card-padding, 16px)
//   --container-padding-block-end:    var(--astryx-card-padding, 16px)

명시적 padding 경로 (명시적 padding prop이 있는 Card/Section/Dialog):