Margin 과 Padding

퍼블리싱을 하다 보니 어느새 익숙해졌다고 생각했던 margin과 padding....
하지만... 다시 보면 또 헷갈리고 거꾸로 이해하고 있고 그래서 당황스러움의 연속이었다.
역시 css는 어려워~!

margin과 패딩을 시각적으로 살펴보자

Margin (파란색 영역):

요소의 외부 여백
요소와 다른 요소 사이의 간격을 제어
배경색이나 테두리에 영향을 주지 않음

Padding (분홍색 영역):

요소의 내부 여백
요소의 테두리와 내용 사이의 간격을 제어
배경색이 적용되는 영역!

Content (녹색 영역):

실제 내용이 위치하는 영역

주요한 차이점 정리

특성	Margin	Padding
적용 위치	요소 외부	요소 내부
간격 조절	다른 요소와의 간격	내용과 테두리 사이의 간격
배경색 영향	받지 않음	요소의 배경색 적용됨
음수 값 사용	가능 (요소 겹침/가까운 배치)	불가능 (0 또는 양수만)
상속	상속되지 않음	상속되지 않음
퍼센트 값 계산 기준	부모 요소의 너비	부모 요소의 너비
병합 현상	세로 방향 마진 병합 발생 가능	병합 현상 없음
인라인 요소에 대한 동작	좌우 마진만 적용, 상하 마진 무시	모든 방향(상하좌우) 적용
요소 크기에 미치는 영향	실제 크기에 포함되지 않음	실제 크기에 포함됨

역시 표로 정리하는게 제일 직관적이다.

인라인 요소에 대한 패딩 동작

• 인라인 요소에서 좌우 패딩은 눈에 보이게 적용되지만, 상하 패딩은 시각적으로는 적용되어도 레이아웃에는 영향을 주지 않는다.

마진 변합(Margin Cpllapsing)

• 두 요소 사이의 세로 마진이 병합되서 하나의 마진으로 처리된다.