CSS · 박스 모델과 display

HTML^? 의 모든 요소는 화면에서 보이지 않는 네모 상자 하나로 그려집니다. CSS^? 로 그 상자의 크기·여백·테두리를 정하는 규칙이 박스 모델이고, 그 상자가 줄을 차지하는지(쌓이는지) 옆으로 흐르는지를 정하는 게 display 입니다. 레이아웃의 가장 밑바탕이에요.

상자 하나를 떠올려 보세요. 안에 든 내용물이 있고, 내용물과 상자 벽 사이의 완충재(padding)가 있고, 상자의 벽 두께(border)가 있고, 상자와 옆 상자 사이의 빈 간격(margin)이 있습니다. 박스 모델은 딱 이 네 겹입니다.

여백·테두리·둥근 모서리가 있고 없고의 차이를 먼저 보세요. 똑같은 내용인데 왼쪽은 빽빽하게 붙어 답답하고, 오른쪽은 padding·border·border-radius로 숨통이 트입니다.

이 문서가 기준으로 삼는 것

표준 CSS(MDN 레퍼런스 기준)입니다. 특정 라이브러리 문법이 아니라 브라우저가 그대로 이해하는 순수 CSS예요. 아래 라이브 데모는 코드를 직접 고쳐 실행해 볼 수 있습니다. width 숫자나 색을 바꿔 보며 눈으로 확인해 보세요.

1. 박스 모델 네 겹 — content · padding · border · margin

무엇: 모든 요소는 안쪽부터 바깥쪽으로 content(내용) → padding(안쪽 여백) → border(테두리) → margin(바깥 여백) 네 겹으로 이뤄집니다.

겹	뜻	비유
`content`	실제 글자·이미지가 들어가는 안쪽 영역	상자에 담긴 물건
`padding`	내용과 테두리 사이의 안쪽 여백	물건을 감싼 완충재
`border`	상자를 두르는 테두리(선)	상자의 벽
`margin`	상자 바깥, 옆 요소와의 바깥 간격	상자끼리의 빈 틈

네 겹을 색으로 구분해 그려 봤습니다. 가운데 글자가 content, 그 둘레의 초록이 padding, 진한 선이 border, 바깥 노랑이 margin이에요.

요소의 배경색(background)은 content와 padding까지 칠해지고, border 바깥의 margin 영역은 항상 투명합니다. 그래서 위 데모에서 초록은 칠해지지만 노랑은 부모 배경이 비쳐 보이는 거예요.

2. box-sizing — width가 어디까지를 가리키나 (가장 중요)

무엇: width 로 정한 숫자가 content만의 너비인지, padding·border를 포함한 너비인지를 정합니다. 이 한 줄로 실제 차지하는 크기가 달라져요.

값	`width` 가 가리키는 범위	실제 차지 너비
`content-box` (기본값)	content만	width + 좌우 padding + 좌우 border
`border-box`	content + padding + border	딱 width 그대로

아래 두 상자는 똑같이 width: 200px 이고 padding·border도 같습니다. 다른 건 box-sizing 한 줄뿐인데 실제 너비가 다릅니다. 눈금자처럼 폭을 비교해 보세요.

왜 content-box가 헷갈릴까

기본값 content-box 에서는 width: 200px 에 padding 20px·border 5px를 더하면 실제로는 250px 를 차지합니다. "200으로 맞췄는데 왜 칸을 넘치지?" 하는 사고가 여기서 나와요. border-box 를 쓰면 padding·border를 더해도 너비가 width 그대로라 계산이 직관적입니다.

3. width · height 와 단위

무엇: 상자의 가로(width)·세로(height) 크기와, 그 최소·최대 한계를 정합니다.

속성	뜻
`width` / `height`	기본 너비 / 높이
`min-width` / `min-height`	이보다 작아지지 않음(하한선)
`max-width` / `max-height`	이보다 커지지 않음(상한선)

크기 단위는 크게 세 가지를 자주 씁니다.

px — 고정 픽셀. width: 200px 처럼 절대 크기.
% — 부모 요소 크기에 대한 비율. width: 50% 는 부모 너비의 절반.
auto — 브라우저가 알아서. block 요소의 width: auto 는 보통 가로를 꽉 채웁니다.

→ rem·em·vw·vh 같은 반응형 단위와 미디어 쿼리는 CSS · 반응형 에서 자세히 다룹니다.

4. margin — 바깥 여백과 마진 병합

무엇: 상자 바깥쪽 간격. 단축으로 한 번에, 또는 방향별로 따로 줄 수 있습니다.

margin: 16px;                /* 네 방향 모두 16px */
margin: 8px 16px;            /* 상하 8px, 좌우 16px */
margin: 8px 16px 24px 0;     /* 상 우 하 좌 (시계방향) */
margin-top: 8px;             /* 한 방향만 따로 */
margin-left: auto;           /* 남는 공간을 왼쪽으로 → 오른쪽 정렬 효과 */

좌우 auto 가운데 정렬: 너비가 정해진 block 요소에 margin-left: auto; margin-right: auto(단축 margin: 0 auto)를 주면 남는 가로 공간이 양쪽에 똑같이 나뉘어 가운데로 정렬됩니다.

마진 병합(margin collapse): 위아래로 맞닿은 두 block 요소의 세로(top/bottom) 마진은 합쳐지지 않고, 둘 중 더 큰 값 하나로 병합됩니다. 아래 데모에서 위 상자의 margin-bottom: 40px 와 아래 상자의 margin-top: 20px 사이 간격은 60px이 아니라 40px 이에요.

마진 병합은 세로·block·일반 흐름에서만

마진 병합은 세로(상하) 마진에서만, 그리고 일반 흐름(normal flow)의 block 요소 사이에서만 일어납니다. 좌우(가로) 마진은 절대 병합되지 않아요. 또 부모와 첫 자식 사이에서도 일어날 수 있어, 부모에 padding 이나 border 를 한 줄 주면 막힙니다. Flexbox·Grid 자식 사이에서는 병합이 일어나지 않습니다.

5. padding 과 border

padding: 내용과 테두리 사이 안쪽 여백. margin 과 똑같이 단축·방향별 표기를 씁니다. 단, 음수는 안 돼요(margin은 음수 가능).

padding: 12px;               /* 네 방향 */
padding: 10px 16px;          /* 상하 / 좌우 */
padding-left: 20px;          /* 한 방향만 */

border: 테두리. 굵기 · 스타일 · 색 세 가지를 한 줄에 적습니다.

border: 2px solid #1f2937;   /* 굵기 스타일 색 */
border-bottom: 1px dashed #999;   /* 아래쪽만 */
border-radius: 8px;          /* 모서리 둥글게 */

스타일 값은 solid(실선)·dashed(점선)·dotted(점)·double(이중선)·none(없음) 등이 있습니다.

→ box-shadow·그림자·둥근 모서리·그라데이션 같은 꾸미기는 CSS · 효과 에서 다룹니다.

6. display — block · inline · inline-block · none

무엇: 상자가 화면에서 어떻게 배치되는지를 정합니다. 가장 기본인 네 값을 봅니다.

값	줄 차지	width/height	상하 margin/padding
`block`	한 줄 통째로 차지(다음 요소는 아래로)	적용됨	적용됨
`inline`	글자처럼 옆으로 흐름(줄바꿈 안 함)	무시됨	상하 간격은 레이아웃에 영향 없음
`inline-block`	옆으로 흐르되	적용됨	적용됨
`none`	상자 자체가 사라짐(자리도 없음)	—	—

<div>·<p> 는 원래 block, <span>·<a> 는 원래 inline입니다. 아래에서 네 가지를 나란히 비교해 보세요. display 값을 바꿔 가며 실행해 보면 차이가 또렷합니다.

visibility: hidden vs display: none: 둘 다 안 보이게 하지만 차이가 큽니다.

속성	보임	자리(공간)
`display: none`	안 보임	자리도 사라짐(주변이 그 자리를 메움)
`visibility: hidden`	안 보임	자리는 그대로 남음(빈 공간으로 비어 있음)

7. overflow — 넘치는 내용 처리

무엇: 상자보다 내용이 클 때(넘칠 때) 어떻게 보일지 정합니다.

값	동작
`visible` (기본값)	자르지 않고 상자 밖으로 그대로 삐져나옴
`hidden`	넘치는 부분을 잘라서 감춤(스크롤바 없음)
`scroll`	넘치든 안 넘치든 스크롤바를 항상 표시
`auto`	넘칠 때만 스크롤바를 자동으로 표시

overflow-x / overflow-y 로 가로·세로를 따로 정할 수도 있습니다. 예: overflow-x: auto; overflow-y: hidden.

한눈에 — 박스/display 정리

속성	역할	핵심 값 / 기본값
`box-sizing`	width가 가리키는 범위	`content-box`(기본) / `border-box`
`width` / `height`	가로 / 세로 크기	`px`, `%`, `auto`
`min/max-width`·`height`	크기 하한 / 상한	—
`margin`	바깥 여백(음수 가능, 상하 병합됨)	단축 / 방향별 / `auto`
`padding`	안쪽 여백(음수 불가)	단축 / 방향별
`border`	테두리(굵기·스타일·색)	`2px solid #333`
`display`	배치 방식	`block` / `inline` / `inline-block` / `none`
`visibility`	보임 여부(자리 유지)	`visible`(기본) / `hidden`
`overflow`	넘치는 내용 처리	`visible`(기본) / `hidden` / `scroll` / `auto`

실무 메모 — * { box-sizing: border-box } 관례

거의 모든 프로젝트가 맨 앞에 아래 한 덩어리를 깔아 둡니다. 모든 요소를 border-box 로 바꿔, width 에 padding·border를 더해도 크기가 어긋나지 않게 하는 거예요. 계산이 직관적이라 레이아웃 사고를 크게 줄여 줍니다.

*, *::before, *::after {
  box-sizing: border-box;
}

Tailwind 같은 프레임워크의 기본 리셋(Preflight)에도 이 규칙이 들어 있어, 요즘은 사실상 표준 관례로 쓰입니다.

다음 단계

여러 상자를 가로·세로로 배치하는 본격 레이아웃(Flexbox·Grid) → CSS · 레이아웃 · Flex · Grid