웹은 인쇄된 문서 방식에서 많은 것을 참고해서 만들어졌다.
글 쓸 때 (대부분의 언어에서)
문장은 한줄에 쓰고 (inline)
문단은 블록처럼 각자 자기만의 범위에 쓴다 (block)
/*block은 위 > 아래이므로 이 속성은 padding-top와 같다*/
padding-block-start: 20px;
/*block은 위 > 아래이므로 이 속성은 padding-bottom과 같다*/
padding-block-end: 40px;
/*inline은 왼 > 오른쪽이므로 이 속성은 margin-left과 같다*/
margin-inline-start: 60px;
/*inline은 왼 > 오른쪽이므로 이 속성은 margin-right 같다*/
margin-inline-end: 80px;이런 속성을 logical-property라고 한다.
이렇게 top, bottom, left, right가 들어간 속성과 기능이 똑같아 보이는데 이런 logical property는 왜 있는 걸까?
모든 언어가 문장은 왼 > 오, 문단은 위 > 아래 순으로 되어 있지는 않기 때문이다.
예를 들어, 일본 만화처럼 문장은 위 > 아래, 문단은 오 > 왼쪽이라면
margin-inline-start는 문장의 시작 margin이므로 margin-top과 같을 것이고, margin-block-start는 문단의 시작 margin이므로 margin-right와 같을 것이다.
✨