쓰기 방향에 맞춰 inline과 block 기준으로 간격과 위치를 지정합니다.
margin-inline은 글이 흐르는 가로축의 시작과 끝, padding-block은 줄이 쌓이는 축의 앞뒤를 뜻합니다. left/right에 고정된 물리 속성보다 다국어와 세로 쓰기 모드에 잘 대응합니다. inset-inline-start, border-block-end 같은 속성도 같은 원리를 사용합니다.
이번 예제의 출발점은 margin-inline: auto; padding-block: 1rem;입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 body에 direction:rtl을 적용해 논리 속성이 어떻게 바뀌는지 확인하세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
margin-left와 margin-inline-start를 동시에 쓰면 쓰기 방향과 cascade에 따라 예상하기 어려운 충돌이 생길 수 있습니다.
직접 바꿔보세요body에 direction:rtl을 적용해 논리 속성이 어떻게 바뀌는지 확인하세요.