쓰기 방향에 맞춰 inline과 block 기준으로 간격과 위치를 지정합니다.
margin-inline은 글이 흐르는 가로축의 시작과 끝, padding-block은 줄이 쌓이는 축의 앞뒤를 뜻합니다. left/right에 고정된 물리 속성보다 다국어와 세로 쓰기 모드에 잘 대응합니다. inset-inline-start, border-block-end 같은 속성도 같은 원리를 사용합니다.
가로로 쓰고 왼쪽부터 읽는 이 문서에서 inline 축은 가로, block 축은 세로입니다. 그래서 margin-inline: auto는 좌우 margin이 되어 max-width 320px 상자를 가운데에 놓고, padding-block과 padding-inline은 위아래 18px와 좌우 24px 여백, border-inline-start는 왼쪽 변의 5px 초록 선이 됩니다. .second의 margin-block-start는 위쪽 14px 간격입니다.
문서 전체를 writing-mode: vertical-rl로 세로쓰기하면 inline 축이 세로가 되어, 같은 border-inline-start가 왼쪽이 아니라 위쪽 변에 그려집니다. width와 height 대신 inline-size와 block-size를 쓰면 크기도 같은 방식으로 쓰기 방향을 따라갑니다.
margin-left와 margin-inline-start를 동시에 쓰면 쓰기 방향과 cascade에 따라 예상하기 어려운 충돌이 생길 수 있습니다.
직접 바꿔보세요body에 direction:rtl을 적용해 논리 속성이 어떻게 바뀌는지 확인하세요.