[HTML/CSS] CSS Padding & Margin(feat. Margin 병합)

Padding과 Margin 모두 여백을 나타내기 위한 CSS 속성이다.

⬜ Padding & Margin

🟩 Padding

padding은 Object 내의 여백(내부 여백)을 의미한다. content와 border의 사이 여백을 나타낸다.

padding: 20px; //상하좌우 모두 20px 내부 여백
padding: 20px 10px; //상하 20px, 좌우 20px 내부 여백
padding: 20px 10px 30px; //상 20px, 좌우 10px, 하 30px 내부 여백
padding: 20px 20px 10px 10px; //상 20px, 우 20px, 하 10px, 좌 10px 내부 여백

🟧 Margin

margin은 Object와 화면과의 여백(외부 여백)을 의미한다. border의 바깥 쪽 여백을 나타낸다.

margin: 20px; //상하좌우 모두 20px 외부 여백
margin: 20px 10px; //상하 20px, 좌우 20px 외부 여백
margin: 20px 10px 30px; //상 20px, 좌우 10px, 하 30px 외부 여백
margin: 20px 20px 10px 10px; //상 20px, 우 20px, 하 10px, 좌 10px 외부 여백
margin: 0 auto; //좌우 외부 여백을 자동으로 설정, 가운데 정렬 기능
margin: -20px 0px 0px -20px; //상 or 좌 음수 여백 설정 시 설정 방향으로 요소 이동
margin: 0px -20px -20px 0px; //하 or 우 음수 여백 설정 시 설정 방향으로 다음 요소 끌어당김

💡 padding과 margin 모두 px이 아닌 다른 단위도 적용 가능하다.

💡 padding의 경우 음수 값 적용이 불가능하다.

💡 padding의 경우 auto(자동 설정) 값 적용이 불가능하다.

🌫️ Margin 병합(Margin Collapse)

Margin 병합 현상이란 한 요소의 아래쪽 바깥 여백과 다른 한 요소의 위쪽 바깥 여백이 만나는 경우 가장 큰 여백의 값 하나로 합쳐지는 현상을 의미한다.

CSS 코드를 보면 위 요소의 margin-bottom: 20px과 아래 요소의 margin-top: 20px이 만나면 예상 값은 20 + 20 = 40px이 되어야 한다.

하지만 위 사진을 보면 margin-bottom: 20px만 주었는데 앞서 있던 사진과 같은 결과 화면을 보여준다.

이는 Margin 병합(붕괴) 현상이 일어나 20px의 margin만 적용되었다는 것이다.

❗ Margin 병합 현상이 발생 조건

1) display: block

display: block 되어있거나 <div> 태그와 같이 display 속성의 기본 설정 값이 block으로 되어 있는 요소에서 발생한다.

2) 상하 바깥 여백만 병합

좌우 바깥 여백은 병합 현상이 발생하지 않는다. 오직 상하 바깥 여백에서만 발생한다.

🪄 Margin 병합 현상 해결 방법

display: inline-block 변경

display 속성을 inline-block으로 변경하게 되면 height와 weight를 모두 설정할 수 있을 뿐만 아니라 margin 병합 현상이 일어나지 않는다.