2026-01-18

margin과 padding

margin

요소의 바깥쪽 여백

• 콘텐츠(content)와 테두리(border) 사이 공간
• 요소 내부 공간
• 배경색(background)이 적용됨

.box {
  padding: 20px;
}

padding

요소의 안쪽 여백

• 요소와 요소 사이 간격
• 요소 외부 공간
• 배경색 적용 X

.box {
  margin: 20px;
}

차이

알아야 할 포인트

• box-sizing과의 관계
  • border-box
    • padding + border 포함해서 width 계산
  • 기본값(content-box)
    • width는 콘텐츠 영역만 padding은 그 밖범위 → padding 추가시 실제 박스 크기 늘어남
• Margin Collapse
  • 세로 방향 margin은 겹쳐짐
  • 더 큰 margin 하나만 적용됨

    div {
    margin-top: 20px;
    margin-bottom: 30px;
    }
    

  • 위에서 실제 간격 = 30px

참고자료

• https://velog.io/@hyejin4169/CSS-margin-padding-%EC%B0%A8%EC%9D%B4%EC%A0%90%EA%B3%BC-%EC%82%AC%EC%9A%A9%EB%B2%95-%EC%A0%95%EB%A6%AC