margin

marign

여백을 설정하는 css 속성

📘margin

공식문서 [mdc] margin

• margin: 상단 우측 하단 좌측 여백 설정
• margin-top: 상단 여백 설정
• margin-right:우측 여백 설정
• margin-bottom:하단 여백 설정
• margin-left:좌측 여백 설정

■모든 사이드 여백 동일하게 설정

margin: 1em;
margin: -3px;

■상단/하단 + 좌측/우측

margin: 5% auto;
margin: 4px 8px;

■상단 + 좌측/우측 + 하단

margin: 1em auto 2em;
margin: 1em 2em 3em;

■상단 + 좌측 + 하단 + 우측

margin: 2px 1em 0 4px;

📘 margin-block

공식문서 [mdn] margin-block
블록레벨 요소의 블록 축을 따라 시작과 끝에 여백을 설정
즉, 수직 방향 여백설정

• margin-block: 수직 방향 여백 설정
• margin-block-start: 수직 방향 여백 설정
• margin-block-end: 수직 방향 여백 설정

margin-block: 10px 20px; /* 절대 길이 */
margin-block: 1em 2em; /* 텍스트 크기에 상대적 */
margin-block: 5% 2%; /* 가장 가까운 블록 컨테이너의 너비에 상대적 */
margin-block: 10px; /* 시작과 끝 값을 모두 설정 */

📘 margin-inline

공식문서 [mdn] margin-inline
인라인 축을 따라 시작과 끝에 여백을 설정
즉, 수평 방향 여백 설정

margin-inline: 10px 20px; /* 절대 길이 */
margin-inline: 1em 2em; /* 텍스트 크기에 상대적 */
margin-inline: 5% 2%; /* 가장 가까운 블록 컨테이너의 너비에 상대적 */
margin-inline: 10px; /* 시작과 끝 값을 모두 설정 */

📘 margin-block과 margin-inline에서의 writing mode

공식문서 [mdn] writing mode

텍스트의 줄의 배치와 블록이 진행되는 방향을 설정

• horizontal-tb: 왼쪽에서 오른쪽, 가로방향
• vertical-rl: 위에서 아래로, 다음 콘텐츠 왼쪽 배치, 세로방향
• vertical-lr: 위에서 아래로, 다음 콘텐츠 오른쪽 배치, 세로방향

결론

• margin은 보통 요소의 상단, 하단, 좌측, 우측 여백을 조절
• margin-block, margin-inline은 writing mode와 블록 축, 인라인 축에 따라 여백을 조절