CSS 마진(Margin) vs 패딩(Padding): 두 속성의 차이점 완벽 정리

CSS를 배우다 보면 반드시 마주치는 개념이 바로 마진(margin)과 패딩(padding)입니다. 이 글에서는 두 속성의 차이점을 예제와 함께 명확하게 살펴보겠습니다.

마진(Margin) vs 패딩(Padding)

가장 간결한 정의부터 시작해 보겠습니다.

• margin: HTML 요소의 테두리(border) 바깥쪽에 여백을 만듭니다.
• padding: HTML 요소의 테두리(border) 안쪽에 여백을 만듭니다.

HTML 요소에 마진 또는 패딩을 적용하면, 두 속성은 아래 그림과 같이 요소에 서로 다른 방식으로 영향을 미칩니다.

실제 예제로 이해하기

위의 개념도를 머릿속에 담아 두고, 이제 실제 HTML 요소에 이 개념을 적용해 보겠습니다.

아래는 <div> 컨테이너 안에 들어 있는 간단한 <button> 요소입니다.

이 버튼에는 다음과 같은 스타일이 적용되어 있습니다.

• 24px 마진: 버튼 주변에 공간을 만들어, 버튼이 속한 부모 요소의 테두리로부터 일정 거리만큼 밀어냅니다.
• 4px 테두리(border)
• 16px 패딩: 버튼의 테두리와 내부 콘텐츠 사이에 공간을 만듭니다.
• 콘텐츠(여기서는 텍스트 라벨 'Button')

button {
    padding: 16px; 
    margin: 24px; 
    border: 4px solid #282828;
}

핵심 정리

margin과 padding 속성은 모두 여백(whitespace)을 제어한다는 공통점이 있습니다. 하지만 여백이 적용되는 위치가 정반대라는 점이 가장 큰 차이입니다. 즉, 요소 바깥쪽 간격이 필요하면 마진을, 요소 안쪽 간격이 필요하면 패딩을 사용하면 됩니다.

추가로 기억할 점은, 패딩 영역에는 요소의 배경색이 함께 적용되지만 마진 영역은 항상 투명하다는 것입니다. 이 차이를 활용하면 버튼이나 카드처럼 배경이 있는 UI 요소의 클릭 영역을 넓힐 때 패딩을, 요소들 사이의 간격을 조절할 때 마진을 사용하는 것이 좋습니다.