[CSS] padding, margin 차이

padding (패딩)

• 요소의 안쪽 여백입니다. 요소의 컨텐츠(텍스트나 이미지 등)와 요소의 경계(border) 사이의 공간을 설정합니다.

• 패딩은 요소의 크기(특히, 요소의 너비와 높이)에 영향을 미칩니다. padding 값이 커지면 요소 자체가 커집니다.

.box {
  padding: 20px;
}

이 경우, 컨텐츠와 요소의 경계 사이에 20픽셀의 여백이 생깁니다.

margin (마진)

• 요소의 바깥 여백입니다. 요소와 다른 요소 사이의 공간을 설정합니다.

• 마진은 요소의 외부에 공간을 추가하지만, 요소 자체의 크기에는 영향을 주지 않습니다. 요소와 요소 간의 간격을 설정하는 역할을 합니다.

.box {
  margin: 20px;
}

이 경우, 해당 요소는 주변 다른 요소와 20픽셀의 간격을 가지게 됩니다.

차이

위치

• padding: 요소 내부(컨텐츠와 경계 사이)에 공간을 만듭니다.
• margin: 요소 외부(요소와 다른 요소 사이)에 공간을 만듭니다.

요소 크기

• padding: 요소의 크기에 영향을 줍니다.
• margin: 요소의 크기에는 영향을 주지 않고, 외부 간격만 설정합니다.

사용 목적

• padding: 컨텐츠와 경계 사이의 공간을 조정하여 시각적으로 요소 내부의 여백을 확보하고 싶을 때 사용합니다.
• margin: 요소 간의 간격을 조정하여 레이아웃을 구성할 때 사용합니다.

시각적 비교

• padding: 컨텐츠 주변의 "안쪽 여백"
• margin: 요소와 다른 요소 간의 "바깥 여백"