Logical properties and values/For margins, borders, and padding

김동현·2026년 3월 21일
CSSdocs

mdn 학습 번역 - CSS

목록 보기
119/190

안녕하세요! 프론트엔드 개발자 양성 과정 강사입니다. 논리적 속성(Logical Properties)의 기본 개념을 익히셨으니, 이제 실제로 여백(Margin, Padding)과 테두리(Border)에 어떻게 적용되는지 구체적으로 살펴볼 차례네요.

MDN 공식 문서의 내용을 하나도 빠짐없이, 여러분이 이해하기 쉽도록 친절한 구어체로 꼼꼼히 번역해 드리겠습니다. 중간중간 실무에서 어떻게 쓰이는지 제 팁도 팍팍 넣어드릴 테니 잘 따라와 주세요!

마진, 테두리, 그리고 패딩을 위한 논리적 속성 (Logical properties for margins, borders, and padding)

CSS 논리적 속성과 값(CSS logical properties and values) 모듈은 다양한 마진(margin), 테두리(border), 패딩(padding) 속성 및 그 단축 속성들에 대해 콘텐츠의 흐름(flow-relative)에 맞춘 매핑(mapping)을 정의하고 있습니다. 이번 가이드에서는 이것들이 구체적으로 어떻게 구성되어 있는지 살펴보겠습니다.

논리적 속성과 값 모듈을 쭉 훑어보셨다면, 아마 속성 목록이 어마어마하게 길다는 걸 눈치채셨을 거예요. 그 이유는 마진, 테두리, 패딩의 각 방향(상/하/좌/우)마다 길게 풀어쓰는 속성(longhand values)이 4개씩 존재하고, 거기에 수많은 단축 속성(shorthand values)들까지 모두 더해졌기 때문입니다.

💡 강사의 팁:
속성 개수가 많다고 겁먹으실 필요 전혀 없습니다! 기존의 top, bottom, left, right 자리에 block-start, block-end, inline-start, inline-end를 끼워 넣는 규칙만 이해하시면 모두 똑같이 적용되거든요.

마진, 테두리, 그리고 패딩의 매핑 (Mappings for margins, borders, and padding)

이 모듈은 각각의 '논리적 값'이 기존의 '물리적 값' 중 어떤 것과 짝을 이루는지(매핑되는지) 상세히 설명하고 있습니다. 아래 표는 쓰기 모드(writing-mode)가 왼쪽에서 오른쪽으로 향하는 기본 가로 방향, 즉 horizontal-tb 일 때 두 값이 어떻게 연결되는지 보여줍니다. 기본 상태에서는 인라인(inline) 방향이 가로(왼쪽에서 오른쪽)로 흐르기 때문에, 논리적 속성인 margin-inline-start는 물리적 속성인 margin-left와 동일한 역할을 하게 됩니다.

만약 여러분이 horizontal-tb 쓰기 모드를 쓰면서 텍스트 방향을 오른쪽에서 왼쪽으로(Right-To-Left, RTL) 바꾼다면, margin-inline-start는 margin-right와 같아질 것입니다. 또한, 완전히 세로로 쓰는 쓰기 모드(vertical writing mode)로 바꾼다면 margin-inline-start는 margin-top과 동일하게 동작할 것입니다.

논리적 속성 (Logical property)물리적 속성 (Physical property)
border-block-endborder-bottom
border-block-end-colorborder-bottom-color
border-block-end-styleborder-bottom-style
border-block-end-widthborder-bottom-width
border-block-startborder-top
border-block-start-colorborder-top-color
border-block-start-styleborder-top-style
border-block-start-widthborder-top-width
border-inline-endborder-right
border-inline-end-colorborder-right-color
border-inline-end-styleborder-right-style
border-inline-end-widthborder-right-width
border-inline-startborder-left
border-inline-start-colorborder-left-color
border-inline-start-styleborder-left-style
border-inline-start-widthborder-left-width
border-start-start-radiusborder-top-left-radius
border-end-start-radiusborder-bottom-left-radius
border-start-end-radiusborder-top-right-radius
border-end-end-radiusborder-bottom-right-radius
margin-block-endmargin-bottom
margin-block-startmargin-top
margin-inline-endmargin-right
margin-inline-startmargin-left
padding-block-endpadding-bottom
padding-block-startpadding-top
padding-inline-endpadding-right
padding-inline-startpadding-left

여기에 더해, 아주 편리한 '단축 속성(shorthands)'들도 새롭게 추가되었습니다. 물리적 속성 시절에는 없었던 기능인데, 이제는 박스의 양쪽 블록 가장자리(상/하)를 동시에 타겟팅하거나, 양쪽 인라인 가장자리(좌/우)를 동시에 타겟팅할 수 있게 되었기 때문이죠! 이 단축 속성들은 기존 물리적 속성에는 대응되는 개념이 아예 없습니다.

속성 (Property)목적 (Purpose)
border-block양쪽 블록 방향 테두리의 색상(border-color), 스타일(border-style), 두께(border-width)를 한 번에 설정합니다.
border-block-color양쪽 블록 방향 테두리의 색상을 설정합니다.
border-block-style양쪽 블록 방향 테두리의 스타일을 설정합니다.
border-block-width양쪽 블록 방향 테두리의 두께를 설정합니다.
border-inline양쪽 인라인 방향 테두리의 색상, 스타일, 두께를 한 번에 설정합니다.
border-inline-color양쪽 인라인 방향 테두리의 색상을 설정합니다.
border-inline-style양쪽 인라인 방향 테두리의 스타일을 설정합니다.
border-inline-width양쪽 인라인 방향 테두리의 두께를 설정합니다.
margin-block블록 방향의 양쪽 마진(margin)을 한 번에 설정합니다.
margin-inline인라인 방향의 양쪽 마진을 한 번에 설정합니다.
padding-block블록 방향의 양쪽 패딩(padding)을 한 번에 설정합니다.
padding-inline인라인 방향의 양쪽 패딩을 한 번에 설정합니다.

💡 강사의 팁:
여기서 margin-inline이나 padding-inline은 정말 혁명적인 기능입니다! 기존에는 요소를 수평 중앙 정렬할 때 margin: 0 auto;처럼 써서 의도치 않게 상하 마진까지 0으로 덮어버리는 실수를 하곤 했죠? 이제는 margin-inline: auto;라고 쓰면 위아래 마진은 그대로 살려둔 채로 좌우 마진만 auto로 설정할 수 있답니다. 정말 많이 쓰니 꼭 외워두세요!

마진 예제 (Margin examples)

기존 물리적 속성 대신 매핑된 논리적 마진 속성들인 margin-inline-start, margin-inline-end, margin-block-start, margin-block-end를 어떻게 사용하는지 볼까요?

이 예제에는 각 가장자리마다 크기가 다른 마진을 가진 두 개의 박스가 있습니다. 마진의 크기를 눈으로 쉽게 확인할 수 있도록 테두리가 있는 바깥쪽 컨테이너 요소도 함께 넣었습니다.

첫 번째 박스는 기존의 '물리적 속성'을 사용했고, 두 번째 박스는 '논리적 속성'을 사용했습니다. 텍스트 방향을 결정하는 direction 속성을 rtl(오른쪽에서 왼쪽으로)로 바꿔서 박스가 어떻게 렌더링되는지 확인해 보세요. 물리적 속성을 쓴 첫 번째 박스의 마진은 원래 자리에 꼿꼿이 고정되어 있지만, 논리적 속성을 쓴 두 번째 박스의 인라인 차원 마진(좌우 마진)은 텍스트 흐름에 맞춰 스르륵 위치가 서로 뒤바뀌는 것을 볼 수 있습니다!

또한 writing-mode 속성을 horizontal-tb에서 vertical-rl로도 한 번 변경해 보세요. 첫 번째 박스의 마진은 여전히 그 자리에 머물러 있지만, 두 번째 박스의 마진은 새로운 텍스트 방향을 졸졸 따라다니며 위아래/좌우가 통째로 바뀌는 신기한 광경을 목격하실 수 있습니다.

<div class="container">
  <div class="inner">
    <div class="physical box">
      margin-top: 5px<br />
      margin-right: 0<br />
      margin-bottom: 2em<br />
      margin-left: 50px
    </div>
  </div>
  <div class="inner">
    <div class="logical box">
      margin-block-start: 5px<br />
      margin-inline-end: 0<br />
      margin-block-end: 2em<br />
      margin-inline-start: 50px
    </div>
  </div>
</div>
body {
  font: 1.2em / 1.5 sans-serif;
}
.container {
  display: flex;
}
.inner {
  border: 2px dotted grey;
}
.box {
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
  padding: 10px;
  width: 220px;
  height: 220px;
}
.box {
  writing-mode: horizontal-tb;
  direction: ltr; /* 여기를 rtl로 바꿔보세요! */
}

.physical {
  margin-top: 5px;
  margin-right: 0;
  margin-bottom: 2em;
  margin-left: 50px;
}

.logical {
  margin-block-start: 5px;
  margin-inline-end: 0;
  margin-block-end: 2em;
  margin-inline-start: 50px;
}

마진 단축 속성 (Margin shorthands)

인라인 양쪽을 한 번에 제어하거나 블록 양쪽을 한 번에 제어할 수 있는 단축 속성인 margin-inline과 margin-block도 있습니다. 이 속성들은 각각 두 개의 값을 받을 수 있습니다. 첫 번째 값은 해당 차원의 '시작점(start)'에 적용되고, 두 번째 값은 '끝점(end)'에 적용됩니다. 만약 값을 딱 하나만 적어준다면 시작과 끝 양쪽 모두에 똑같은 값이 적용됩니다.

예를 들어, 일반적인 가로 쓰기 모드(horizontal writing mode)에서 아래의 CSS 코드는 박스의 위쪽에 5px의 마진을 주고 아래쪽에 10px의 마진을 주게 됩니다.

.box {
  margin-block: 5px 10px; /* 블록의 시작(위)은 5px, 끝(아래)은 10px */
}

패딩 예제 (Padding examples)

마진과 마찬가지로, 물리적 속성 대신 논리적 패딩 속성인 padding-inline-start, padding-inline-end, padding-block-start, padding-block-end를 사용할 수 있습니다.

이번 예제에도 두 개의 박스가 등장합니다. 하나는 물리적 패딩 속성으로 설정했고, 다른 하나는 논리적 패딩 속성으로 설정했습니다. 현재 writing-mode가 기본값인 horizontal-tb이기 때문에 두 박스의 모양은 완전히 똑같이 보일 것입니다.

여기서도 direction 속성을 rtl로 바꿔서 텍스트가 오른쪽에서 왼쪽으로 흐르도록 만들어 보세요. 첫 번째 박스의 패딩은 꿈쩍도 하지 않지만, 두 번째 박스의 인라인 패딩(좌우 패딩)은 텍스트의 흐름에 맞춰 서로 위치를 바꿀 것입니다.

writing-mode를 horizontal-tb에서 vertical-rl로 바꾸는 테스트도 해보세요. 마찬가지로 첫 번째 박스의 패딩 위치는 그대로 고정되어 있지만, 두 번째 박스의 패딩은 텍스트의 방향을 따라 휙 회전하는 모습을 관찰하실 수 있습니다.

<div class="container">
  <div class="physical box">
    padding-top: 5px<br />
    padding-right: 0<br />
    padding-bottom: 2em<br />
    padding-left: 50px
  </div>

  <div class="logical box">
    padding-block-start: 5px<br />
    padding-inline-end: 0<br />
    padding-block-end: 2em<br />
    padding-inline-start: 50px
  </div>
</div>
body {
  font: 1.2em / 1.5 sans-serif;
}

.container {
  display: flex;
}
.box {
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
  margin: 10px;
  width: 220px;
  height: 220px;
}
.box {
  writing-mode: horizontal-tb;
  direction: ltr; /* 여기를 rtl로 바꿔보세요! */
}

.physical {
  padding-top: 5px;
  padding-right: 0;
  padding-bottom: 2em;
  padding-left: 50px;
}

.logical {
  padding-block-start: 5px;
  padding-inline-end: 0;
  padding-block-end: 2em;
  padding-inline-start: 50px;
}

패딩 단축 속성 (Padding shorthands)

마진과 마찬가지로 패딩에도 두 개의 값을 한 번에 설정할 수 있는 단축 속성인 padding-inline과 padding-block이 준비되어 있습니다. 이를 통해 두 개의 인라인 가장자리 또는 두 개의 블록 가장자리의 패딩을 아주 깔끔하게 한 줄로 지정할 수 있습니다.

가로 방향 쓰기 모드(horizontal writing-mode)에서, 아래 CSS 코드는 박스의 위쪽에 5px의 패딩을 주고 아래쪽에 10px의 패딩을 주게 됩니다.

.box {
  padding-block: 5px 10px;
}

테두리 예제 (Border examples)

사실 이번 논리적 속성 모듈이 유난히 방대해 보이게 만든 주범은 바로 테두리(border) 속성들입니다. 테두리는 박스의 4면 각각에 대해 색상(color), 두께(width), 스타일(style)을 따로따로 지정하는 길게 풀어쓰는 속성(longhand properties)들이 모두 논리적 버전으로 존재하고, 거기에 각 면의 3가지 속성을 한 번에 설정하는 단축 속성들까지 전부 다 만들어져 있기 때문이죠. 마진이나 패딩과 마찬가지로 기존 물리적 속성과 1:1로 대응되는 논리적 속성들이 모두 존재합니다.

아래 데모에서는 길게 풀어쓰는 방식과 단축 속성 3가지를 섞어서 사용해 보았습니다. 다른 데모들과 똑같이, direction을 rtl로 바꿔보시거나 writing-mode를 vertical-rl로 바꿔가며 눈으로 직접 차이를 확인해 보세요!

<div class="container">
  <div class="physical box">Borders using physical properties.</div>
  <div class="logical box">Borders using logical properties.</div>
</div>
body {
  font: 1.2em / 1.5 sans-serif;
}

.container {
  display: flex;
}
.box {
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
  margin: 10px;
  width: 220px;
  height: 220px;
}
.box {
  writing-mode: horizontal-tb;
  direction: ltr; /* 여기를 rtl로 바꿔보세요! */
}

.physical {
  border-top: 2px solid hotpink;
  border-right-style: dotted;
  border-right-color: goldenrod;
  border-right-width: 5px;
  border-bottom: 4px double black;
  border-left: none;
}

.logical {
  border-block-start: 2px solid hotpink;
  border-inline-end-style: dotted;
  border-inline-end-color: goldenrod;
  border-inline-end-width: 5px;
  border-block-end: 4px double black;
  border-inline-start: none;
}

테두리 단축 속성 (Border shorthands)

블록 방향이나 인라인 방향 양쪽 모두의 두께, 스타일, 색상을 동시에 설정하는 두 값짜리 단축 속성이 있으며, 나아가 블록 또는 인라인 방향 전체의 3가지 요소(두께/스타일/색상)를 한 큐에 설정해버리는 강력한 단축 속성도 존재합니다.

아래 코드를 가로 쓰기 모드(horizontal writing mode)에서 실행하면, 박스의 위와 아래(블록 방향)에는 2px 두께의 초록색 실선(solid) 테두리가 그려지고, 왼쪽과 오른쪽(인라인 방향)에는 4px 두께의 보라색 점선(dotted) 테두리가 그려지게 됩니다. 코드가 정말 아름답게 줄어들죠?

.box {
  border-block: 2px solid green; /* 위 아래 테두리 한 번에! */
  border-inline-width: 4px;      /* 좌우 두께 */
  border-inline-style: dotted;   /* 좌우 스타일 */
  border-inline-color: rebeccapurple; /* 좌우 색상 */
}

흐름 상대적 border-radius 속성 (Flow relative border-radius properties)

이 모듈은 모서리를 둥글게 깎아주는 border-radius 속성에 대해서도 완벽하게 흐름 상대적인 버전을 제공합니다. 이름 짓는 규칙이 살짝 특이한데요, 두 개의 차원이 만나는 지점을 가리킵니다.

아래 예제를 일반적인 가로 쓰기 모드(horizontal-tb)에서 실행하면, 우측 상단 모서리는 1em, 우측 하단은 0, 좌측 하단은 20px, 그리고 좌측 상단 모서리는 40px만큼 둥글어집니다. 

.box {
  /* 블록의 끝(아래)과 인라인의 시작(왼쪽)이 만나는 곳 = 좌측 하단 */
  border-end-start-radius: 1em;  
  /* 블록의 끝(아래)과 인라인의 끝(오른쪽)이 만나는 곳 = 우측 하단 */
  border-end-end-radius: 0;
  /* 블록의 시작(위)과 인라인의 끝(오른쪽)이 만나는 곳 = 우측 상단 */
  border-start-end-radius: 20px;
  /* 블록의 시작(위)과 인라인의 시작(왼쪽)이 만나는 곳 = 좌측 상단 */
  border-start-start-radius: 40px;
}

💡 강사의 팁:
"어휴, 이름이 너무 길어서 못 쓰겠네!" 싶으실 거예요. 사실 현업에서도 border-radius 만큼은 그냥 기존 물리적 속성을 쓰는 경우가 아직 많습니다. 그래도 어떤 모서리를 가리키는지 퀴즈처럼 풀어보는 재미가 있죠! 앞의 단어는 상하(블록), 뒤의 단어는 좌우(인라인)를 뜻한다고 생각하시면 쉽습니다.

4개짜리 값을 가지는 단축 속성 문법에서 논리적 값 표기하기 (Indicating logical values for the 4-value shorthand syntax)

우리가 가장 자주 쓰는 형태, 예를 들어 margin: 10px 20px 30px 40px; 처럼 값 4개를 연달아 쓰는 초강력 단축 속성들에 대해서도 논리적인 방향을 적용하자는 제안이 명세서에 나와 있습니다. 하지만 이 문법을 정확히 어떤 방식으로 표기할지에 대해서는 아직 최종적인 합의가 이루어지지 않은 상태이며, 여전히 W3C 이슈 트래커에서 활발하게 논의가 진행 중입니다.

따라서 현재로서는 margin, padding, border 같은 4값 단축 속성을 쓰면 무조건 기존의 물리적인 방향(위, 오른쪽, 아래, 왼쪽 순서)으로만 작동합니다. 만약 콘텐츠 흐름에 맞춰 방향이 유동적으로 변하는 것이 중요한 프로젝트라면, 당분간은 귀찮더라도 길게 풀어쓰는 속성(margin-block, padding-inline 등)들을 사용하셔야 합니다.

더 보기 (See also)

MDN 문서 개선에 참여하기 (Help improve MDN)

지금까지 마진, 패딩, 보더에 적용되는 논리적 속성을 깊이 있게 살펴보았습니다. 처음에만 조금 헷갈릴 뿐, block과 inline이 뜻하는 방향의 감만 잡으시면 코드를 훨씬 우아하고 유연하게 작성하실 수 있습니다. 복습하시다가 궁금한 점이 생기면 언제든 질문해 주세요!

profile
김동현
프론트에_가까운_풀스택_개발자
이전 포스트

Logical properties and values/For floating and positioning

다음 포스트

Logical properties and values/For sizing

0개의 댓글