Table of Contents

2주차｜CSS 박스 모델 완전 정복 — margin과 padding의 차이

웹사이트에서 모든 요소는 보이지 않는 상자(Box) 로 이루어져 있습니다.
이 상자를 이해하면 정렬, 여백, 디자인의 균형이 한눈에 보입니다.
이번 강의에서는 CSS 기본 개념을 한 단계 발전시켜 박스 모델(Box Model) 의 구조와 그중에서도 가장 헷갈리는 margin과 padding의 차이를 명확히 정리해봅니다.

박스 모델(Box Model)이란?

CSS에서 모든 요소는 하나의 “박스(Box)”로 표현됩니다.
이 박스는 다음 4개의 층으로 구성됩니다 👇

┌───────────────┐  ← margin (바깥 여백)
│ ┌───────────┐ │
│ │  border   │ │  ← border (테두리)
│ │ ┌───────┐ │ │
│ │ │padding│ │ │  ← padding (안쪽 여백)
│ │ └───────┘ │ │
│ └───────────┘ │
└───────────────┘
     content       ← 실제 콘텐츠 영역

content : 글자나 이미지가 실제로 들어가는 부분
padding : 콘텐츠와 테두리 사이의 안쪽 여백
border : 테두리 선
margin : 요소 밖의 바깥 여백

이 구조를 이해하면 모든 박스가 ‘레이아웃을 구성하는 틀’로 보이기 시작합니다.

margin과 padding의 차이

많은 초보자가 “둘 다 여백 아닌가요?”라고 묻습니다.
맞습니다. 하지만 방향이 완전히 달라요.

구분	위치	영향	예시
margin	요소 밖의 여백	요소 간 거리 조정	“다른 박스와의 거리”
padding	요소 안의 여백	콘텐츠와 테두리 간 거리	“박스 안쪽 공간”

예를 들어, 이런 HTML이 있다고 해볼게요.

<div class="box">CSS 박스 모델</div>

그리고 다음과 같은 CSS를 적용합니다.

.box {
  background-color: #e0f2fe; /* 연한 하늘색 배경 */
  border: 2px solid #0284c7; /* 파란 테두리 */
  padding: 20px; /* 내부 여백 */
  margin: 40px; /* 외부 여백 */
}

이렇게 하면 화면에 파란 박스가 하나 생기고,
그 박스와 주변 요소 사이에는 40px 간격(margin),
박스 내부의 글씨와 테두리 사이에는 20px 간격(padding) 이 생깁니다.

실습 ① margin 변화 보기

.box1 {
  margin: 10px;
}
.box2 {
  margin: 50px;
}

두 박스를 위아래로 배치해보면,
두 번째 박스는 첫 번째보다 훨씬 멀리 떨어져 있습니다.
이게 바로 margin — “박스와 박스 사이의 거리”입니다.

실습 ② padding 변화 보기

.box {
  padding: 10px;
}
.box-large {
  padding: 50px;
}

이제 같은 박스지만 내용 주변의 공간이 달라집니다.
글자가 테두리에서 멀어지죠.
이게 바로 padding — “박스 내부의 공간”입니다.

border 활용으로 시각적으로 이해하기

.box-demo {
  border: 3px dashed #0ea5e9; /* 점선 테두리 */
  padding: 20px;
  margin: 20px;
}

border는 박스를 “눈에 보이게” 만들어주는 역할을 합니다.
개발자 도구(F12)로 요소를 선택하면 각 여백 영역이 색상으로 표시됩니다.
margin은 노랑, padding은 초록, border는 주황으로 구분되는 걸 볼 수 있습니다.

width와 height 이해하기

박스의 가로(width) 와 세로(height) 는 콘텐츠 크기와 여백에 영향을 받습니다.

기본적으로 CSS는 content-box 모델을 사용합니다.

.box {
  width: 300px;
  padding: 20px;
  border: 10px solid #000;
}

이 경우 실제 박스의 총 너비는 300 + 20*2 + 10*2 = 360px 입니다.
만약 “패딩과 보더까지 포함해서 300px로 딱 맞게” 만들고 싶다면?

.box {
  box-sizing: border-box;
}

이 속성은 실무에서 거의 항상 설정합니다.
워드프레스, 테일윈드, 부트스트랩 같은 프레임워크도 기본적으로 border-box를 사용합니다.

워드프레스에서 박스 여백 조정하기

워드프레스에서는 CSS를 직접 입력하지 않아도
각 블록마다 “여백(margin)”과 “패딩(padding)” 설정이 있습니다.

단락 블록 → 고급 → 여백(margin)
그룹 블록 → 패딩(padding)

만약 블록 편집기에서 직접 조정이 어려운 경우,
“추가 CSS”에 직접 코드를 넣어도 됩니다.

.wp-block-group {
  padding: 24px;
  margin-bottom: 32px;
}

이렇게 하면 글과 글 사이에 자연스러운 간격이 생기죠.

실습 ③ 시각화 도구로 박스 확인하기

브라우저에서 F12 또는 Ctrl+Shift+I를 눌러 개발자 도구를 엽니다.
원하는 요소를 클릭합니다.
오른쪽 CSS 탭 하단의 Box Model Diagram을 확인해보세요.
– 주황색 = margin
– 초록색 = padding
– 파랑 = content

이걸 직접 보면 “아! margin은 밖이고 padding은 안이구나”가 확실히 와닿습니다.