CSS 박스 모델 기초 정리하기

이 글에서 다루는 내용

CSS에서 HTML 요소는 화면에 사각형 박스처럼 배치됩니다.

글자, 이미지, 버튼, 카드, 입력창도 모두 박스라고 생각할 수 있습니다.

이 박스가 어떤 구조로 되어 있는지 이해하는 것이 박스 모델입니다.

이번 글에서는 CSS 박스 모델의 핵심 개념을 정리합니다.

content
padding
border
margin
box-sizing

CSS 박스 모델이란?

CSS 박스 모델은 HTML 요소가 화면에서 차지하는 공간을 설명하는 개념입니다.

쉽게 말하면 웹페이지의 요소를 하나의 상자로 보는 방식입니다.

<div class="box">내용입니다</div>

위 div는 화면에서 하나의 박스로 보입니다.

이 박스는 단순히 내용만 있는 것이 아니라, 안쪽 여백, 테두리, 바깥 여백까지 함께 가집니다.

margin
┌──────────────────────┐
│ border               │
│  ┌────────────────┐  │
│  │ padding        │  │
│  │  ┌──────────┐  │  │
│  │  │ content  │  │  │
│  │  └──────────┘  │  │
│  └────────────────┘  │
└──────────────────────┘

가운데에 실제 내용이 있고, 그 주변을 padding, border, margin이 감싸는 구조입니다.

1. content

content는 요소 안에 들어가는 실제 내용입니다.

글자, 이미지, 버튼의 텍스트 등이 content에 해당합니다.

<div class="box">안녕하세요</div>

위 코드에서 안녕하세요가 content입니다.

CSS에서 width와 height를 설정하면 기본적으로 content 영역의 크기를 정합니다.

.box {
  width: 200px;
  height: 100px;
}

위 코드는 content 영역의 너비를 200px, 높이를 100px로 설정합니다.

2. padding

padding은 content와 border 사이의 안쪽 여백입니다.

쉽게 말하면 내용과 테두리 사이에 넣는 쿠션입니다.

.box {
  padding: 20px;
}

위 코드는 content 주변에 안쪽 여백을 20px 줍니다.

border
┌────────────────────┐
│ padding            │
│   content          │
│                    │
└────────────────────┘

padding을 주면 내용이 테두리에 딱 붙지 않고 여유 있게 보입니다.

버튼이나 카드 디자인에서 자주 사용합니다.

button {
  padding: 10px 16px;
}

위 코드는 버튼 안쪽에 위아래 10px, 좌우 16px의 여백을 줍니다.

padding 값 여러 개 쓰기

padding은 값을 여러 개로 나누어 줄 수 있습니다.

.box {
  padding: 10px;
}

위 코드는 위, 오른쪽, 아래, 왼쪽 모두 10px입니다.

.box {
  padding: 10px 20px;
}

위 코드는 위아래 10px, 좌우 20px입니다.

.box {
  padding: 10px 20px 30px 40px;
}

위 코드는 위쪽부터 시계 방향으로 적용됩니다.

순서	방향
첫 번째 값	위
두 번째 값	오른쪽
세 번째 값	아래
네 번째 값	왼쪽

3. border

border는 요소의 테두리입니다.

.box {
  border: 1px solid black;
}

위 코드는 박스에 검은색 실선 테두리를 만듭니다.

border는 보통 두께, 모양, 색상을 함께 작성합니다.

border: 두께 모양 색상;

예시입니다.

.card {
  border: 1px solid #ddd;
}

카드 UI에서 연한 테두리를 줄 때 자주 사용합니다.

버튼, 입력창, 카드, 이미지 박스 등 다양한 요소에서 사용됩니다.

4. margin

margin은 요소 바깥쪽 여백입니다.

쉽게 말하면 다른 요소와 떨어지는 거리입니다.

.box {
  margin: 20px;
}

위 코드는 박스 바깥쪽에 20px의 여백을 만듭니다.

요소 A      margin      요소 B

padding은 박스 안쪽 여백이고, margin은 박스 바깥쪽 여백입니다.

이 둘을 헷갈리기 쉽습니다.

padding과 margin 차이

구분	padding	margin
위치	요소 안쪽 여백	요소 바깥쪽 여백
역할	내용과 테두리 사이 간격	다른 요소와의 간격
배경색 영향	배경색이 보임	배경색이 보이지 않음
사용 예시	버튼 안쪽 여백	카드 사이 간격

간단히 기억하면 됩니다.

padding은 안쪽 여백입니다.

margin은 바깥쪽 여백입니다.

5. box-sizing

box-sizing은 요소의 크기를 계산하는 방식을 정하는 속성입니다.

처음 CSS를 배울 때 박스 크기가 예상보다 커지는 이유가 대부분 여기서 나옵니다.

기본값은 보통 content-box입니다.

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}

기본 계산 방식에서는 width: 200px이 content 영역만 의미합니다.

그래서 실제 박스 너비는 다음처럼 계산됩니다.

content 200px
+ 왼쪽 padding 20px
+ 오른쪽 padding 20px
+ 왼쪽 border 5px
+ 오른쪽 border 5px
= 실제 너비 250px

즉, 내가 200px로 설정했는데 실제 화면에서는 250px이 될 수 있습니다.

border-box

이 문제를 줄이기 위해 보통 box-sizing: border-box;를 자주 사용합니다.

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}

border-box를 사용하면 width: 200px 안에 content, padding, border가 모두 포함됩니다.

전체 너비 200px 안에
content + padding + border 포함

그래서 요소 크기를 계산하기 훨씬 편합니다.

자주 쓰는 기본 설정

보통 모든 요소에 box-sizing: border-box;를 적용합니다.

* {
  box-sizing: border-box;
}

조금 더 꼼꼼하게 작성하면 다음처럼 사용하기도 합니다.

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

이렇게 하면 일반 요소뿐만 아니라 ::before, ::after 가상 요소에도 같은 크기 계산 방식이 적용됩니다.

처음에는 아래 코드만 기억해도 충분합니다.

* {
  box-sizing: border-box;
}

전체 예시

HTML 코드입니다.

<div class="card">
  <h2>카드 제목</h2>
  <p>박스 모델을 이해하면 여백과 크기를 조절하기 쉬워집니다.</p>
</div>

CSS 코드입니다.

* {
  box-sizing: border-box;
}

.card {
  width: 300px;
  padding: 20px;
  border: 1px solid #ddd;
  margin: 20px;
}

각 속성의 의미는 다음과 같습니다.

속성	의미
`width: 300px;`	카드의 너비 설정
`padding: 20px;`	카드 안쪽 여백
`border: 1px solid #ddd;`	카드 테두리
`margin: 20px;`	카드 바깥쪽 여백
`box-sizing: border-box;`	크기 계산을 쉽게 만듦

정리

CSS 박스 모델은 HTML 요소가 화면에서 차지하는 공간을 설명하는 개념입니다.

박스 모델은 content, padding, border, margin으로 구성됩니다.

content는 실제 내용입니다.