🌱 기초 프론트엔드
CSS Margin과 Padding의 차이
쉽게 이해하기
액자를 생각해보세요. 액자 안에 사진이 있고, 사진과 액자 테두리 사이의 여백이 Padding이에요. 그리고 액자를 벽에 걸었을 때, 액자와 다른 액자 사이의 간격이 Margin이죠. Padding은 내용물과 테두리 사이, Margin은 테두리와 다른 요소 사이의 거리예요.
핵심 정리
Margin은 요소 바깥 여백, Padding은 요소 안쪽 여백이에요.
자세히 알아보기
Margin과 Padding은 둘 다 여백을 만들지만, 위치가 달라요. Padding은 요소의 테두리 안쪽 여백이고, Margin은 테두리 바깥쪽 여백이에요. 예를 들어 버튼이 있다면, 버튼 텍스트와 버튼 테두리 사이 공간이 Padding이고, 버튼과 다른 요소 사이 공간이 Margin이에요.
실무에서는 이 차이가 중요해요. 버튼을 클릭 가능한 영역을 넓히려면 Padding을 늘려야 해요. Margin을 늘리면 버튼 자체 크기는 그대로고 다른 요소와의 간격만 벌어지거든요. 또한 배경색을 적용하면 Padding 영역까지만 색이 칠해지고, Margin 영역은 투명해요.
CSS에서는 `margin: 10px;`처럼 네 방향 모두 같은 값을 주거나, `margin: 10px 20px;`처럼 상하/좌우를 다르게 줄 수 있어요. `margin-top`, `padding-left`처럼 특정 방향만 지정할 수도 있고요. 레이아웃을 잡을 때 Margin과 Padding을 적절히 조합해서 사용하면, 깔끔하고 읽기 좋은 디자인을 만들 수 있어요.