논리적 마진 📏📐의 기본 🔩⚙

논리적 여백(margin-block-start , margin-block-end , margin-inline-start , margin-inline-end )과 논리적 패딩, 논리적 경계 사용의 핵심 차이점을 이해합니다.

이미지를 염두에 두십시오.



기본적으로:( writing-mode:horizontal-tb )

margin-block-start means == margin-top
margin-block-end means == margin-bottom
margin-inline-start means == margin-left
margin-inline-end means == margin-right

예시:
코드펜link

다르게 행동하고,
사용 시writing-mode:vertical-lr:

margin-block-start means == margin-left
margin-block-end means == margin-right
margin-inline-start means == margin-top 
margin-inline-end means == margin-bottom

예시:
코드펜link

다른 방식으로 작동합니다.
사용 시writing-mode:vertical-rl:

margin-block-start means == margin-right
margin-block-end means == margin-left
margin-inline-start means == margin-top 
margin-inline-end means == margin-bottom

예시:
코드펜link

기본적으로 각 margin-block/inline-start/end 속성은 writing-mode , direction 및 text-orientation 값을 기준으로 margin-top/left/bottom/right 속성에 매핑됩니다. 이 개념은 논리적 패딩 및 논리적 테두리에 대해 동일합니다.

행복한 코딩!!!😃