CSS 박스 모델에서 margin과 padding은 각각 어떤 역할을 하나요?

이렇게 답해 보세요 (핵심 답변)

padding은 콘텐츠와 테두리(border) 사이의 안쪽 여백이고, margin은 테두리 바깥에서 다른 요소와의 거리를 벌리는 바깥 간격입니다. 요소의 배경색이나 배경 이미지는 기본적으로 padding 영역까지 칠해지고 클릭 영역에도 포함되지만, margin 영역은 투명하게 비어 있어 배경이나 클릭 영역에 포함되지 않습니다. 또한 padding에는 음수 값을 줄 수 없지만 margin에는 음수 값을 주어 요소를 겹치거나 끌어당기는 배치가 가능합니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

1. 버튼이나 링크의 터치·클릭 영역을 넓히고 싶을 때는 바깥 간격인 margin이 아니라 안쪽 여백인 padding을 늘려야 의도대로 동작합니다.
2. 일반 블록 흐름에서 위아래로 맞닿은 세로 margin은 단순히 더해지지 않고 더 큰 쪽으로 합쳐지는 마진 상쇄가 일어날 수 있습니다.

면접에서 자주 하는 실수

가로 방향 margin이나 Flexbox·Grid 아이템의 margin까지 모두 세로 블록처럼 상쇄된다고 생각하면 안 됩니다.