topic★★★★★난이도 · 약 20분

모든 것은 박스다 — Box Model

content, padding, border, margin — CSS 박스 모델의 4계층 구조.

#Box Model#padding#margin#border#content

왜 배우는가

버튼, 문단, 이미지 — 둥글게 보여도 CSS 세계에서는 전부 사각형 박스이다. 이 박스의 간격을 이해하면 레이아웃의 비밀이 풀린다.

모든 HTML 요소는 4겹 박스로 둘러싸여 있습니다

1. Content — 실제 내용 (텍스트, 이미지) 2. Padding — 내용과 테두리 사이 여백 3. Border — 눈에 보이는 테두리선 4. Margin — 다른 요소와의 바깥 간격

CSS 박스 모델 4겹 — content → padding → border → margin

css

.card {
  /* Content: 내용 자체의 크기 */
  width: 300px;

  /* Padding: 내용 <-> 테두리 사이 */
  padding: 20px;

  /* Border: 테두리선 */
  border: 2px solid #ddd;

  /* Margin: 바깥 간격 */
  margin: 16px;
}

content, padding, border, margin 4계층이 모두 포함된 카드 스타일.

padding = 안쪽 여백 (배경색이 적용됨) margin = 바깥 여백 (배경색 없음, 투명) 비유: padding은 택배 상자 안의 뽁뽁이, margin은 상자 간 간격

상하좌우를 한 번에 설정하는 단축 표기법

css

/* 1값: 상하좌우 모두 */
padding: 20px;

/* 2값: 상하 / 좌우 */
padding: 10px 20px;

/* 4값: 상 / 우 / 하 / 좌 (시계방향) */
padding: 10px 20px 15px 20px;

/* 개별 지정 */
margin-top: 16px;
margin-bottom: 8px;

1값, 2값, 4값 단축 표기와 개별 지정 방법.

홈페이지 카드에 padding과 margin을 적용해봅시다

css

.card {
  background: white;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  margin-bottom: 16px;
}

.card h2 {
  margin-top: 0;
  margin-bottom: 8px;
  color: #1A1A2E;
}

.card p {
  margin: 0;
  color: #555;
}

카드에 padding(안쪽), margin(바깥), border-radius(둥근 모서리)를 적용한 예시.

계층	설명
content	실제 내용(텍스트, 이미지)이 들어가는 영역
padding	내용과 테두리 사이의 안쪽 여백
border	박스의 테두리 — 두께, 스타일, 색상 지정 가능
margin	다른 요소와의 바깥쪽 여백

display	설명
block	한 줄 전체를 차지 (div, p, h1)
inline	내용 크기만큼만 차지 (span, a, strong)

개발자 도구(F12)에서 박스 모델을 직접 확인할 수 있습니다.

실기 드릴 3문항

edit실기 드릴 · 단답형

내용과 테두리 사이의 여백을 만드는 속성은?

check_circle실기 드릴 · OX

margin에는 요소의 background-color가 적용된다.

edit실기 드릴 · 단답형

CSS에서 1rem은 항상 16px과 같은가?