margin(바깥쪽 여백) 속성 및 지정 방식

1. 방향별 개별 지정

원하는 방향에만 여백을 줄 때 사용합니다. 

 

• margin-top: 위쪽 여백
• margin-right: 오른쪽 여백
• margin-bottom: 아래쪽 여백
• margin-left: 왼쪽 여백

2. 단축 속성 (시계 방향 순서)

한 줄에 여러 방향의 마진을 동시에 설정합니다. (위 ➔ 오른쪽 ➔ 아래 ➔ 왼쪽)

• 4개 값 지정: margin: 10px 20px 30px 40px; (각각 상, 우, 하, 좌)
• 3개 값 지정: margin: 10px 20px 30px; (상, 좌우, 하)
• 2개 값 지정: margin: 10px 20px; (상하, 좌우)
• 1개 값 지정: margin: 10px; (모든 방향 동일) 

3. 자주 쓰이는 실전 활용 패턴

• 가운데 정렬: margin: 0 auto; (위아래는 여백 0, 좌우는 브라우저가 남은 공간을 균등 분할)
• 음수 마진 적용: margin-top: -20px; (요소를 위로 끌어올려 다른 요소와 겹치게 할 때 사용)