[CSS] #06 스타일 속성, CSS 박스 모델 완벽 정복! margin, padding, border 차이와 활용법

 

 

안녕하세요, 토스트데브입니다!
웹에서 모든 HTML 요소는 기본적으로 사각형 박스(Box)입니다.

이 박스의 구조를 이해하는 것이 바로 CSS의 핵심이라 할 수 있습니다.
오늘은 박스 모델(Box Model)을 통해 margin, padding, border, width, height의 관계를 완벽하게 이해해봅시다!

 

 

1️⃣ 박스 모델(Box Model)이란?

CSS에서 모든 요소는 사각형 박스로 구성되어 있으며, 이 박스는 다음 4개의 영역으로 나뉩니다:

+---------------------------+
|        margin             | ← 외부 여백
|  +---------------------+  |
|  |      border         |  | ← 테두리
|  |  +--------------+   |  |
|  |  |  padding     |   |  | ← 안쪽 여백
|  |  | +--------+   |   |  |
|  |  | | content |   |  |  | ← 실제 내용
|  |  | +--------+   |   |  |
|  |  +--------------+   |  |
|  +---------------------+  |
+---------------------------+

 

 

2️⃣ 구성 요소별 속성 정리

✅ content – 실제 콘텐츠 영역

• 텍스트, 이미지, 버튼 등 실제 내용이 들어가는 공간
• width, height로 크기 설정 가능

div {
  width: 200px;
  height: 100px;
}

 

✅ padding – 안쪽 여백

• 콘텐츠와 테두리(border) 사이의 여백
• 내부 여백으로 요소의 크기를 더 넓게 보이게 함

div {
  padding: 20px;
}

 

속성	설명
padding-top	위쪽 안쪽 여백
padding-right	오른쪽
padding-bottom	아래쪽
padding-left	왼쪽

💡 단축 속성으로 padding: 10px 20px; → 위아래 10px, 좌우 20px
💡 상세 속성으로 padding: 10px 20px 15px 25px;  → 위 10px 우 20px 아래 15px 좌 25px

 

✅ border – 테두리

• 요소의 외곽선
• 두께, 색상, 선 종류를 지정할 수 있음

div {
  border: 2px solid black;
}

 

속성	설명
border-width	테두리 두께
border-style	선의 종류 (solid, dotted, dashed 등)
border-color	테두리 색상

 

✅ margin – 바깥 여백

• 요소 바깥의 외부 여백 (다른 요소와의 거리)
• 다른 박스와의 간격을 조정하는 데 사용

div {
  margin: 30px;
}

속성	설명
margin-top	위쪽 바깥 여백
margin-right	오른쪽
margin-bottom	아래쪽
margin-left	왼쪽

💡 margin: 0 auto; → 가운데 정렬 효과 (가로 너비 지정 필수)

 

 

3️⃣ 총 요소 크기 계산 방식

기본적으로 브라우저는 요소의 크기를 다음과 같이 계산합니다

총 너비 = width + padding + border + margin
총 높이 = height + padding + border + margin

✅ 예시:

div {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  margin: 20px;
}

총 너비 = 200 + 102 + 52 + 20*2 = 270px
총 높이도 마찬가지로 계산됩니다.

 

 

4️⃣ box-sizing 속성으로 계산 방식 바꾸기

기본값: content-box

• width와 height는 콘텐츠(content)만 포함

변경: border-box

• width와 height에 padding과 border 포함

* {
  box-sizing: border-box;
}

실무에서는 거의 대부분 border-box를 기본으로 사용합니다.
전체 요소에 * { box-sizing: border-box; }를 지정해두면 예측 가능한 레이아웃이 가능해요.

 

 

5️⃣ 박스 모델 속성 활용 팁

목적	사용 속성
내부 콘텐츠 여백 조절	padding
외부 간격 조절	margin
테두리 스타일 지정	border
요소의 크기 예측 가능하게	box-sizing: border-box

 

 

✅ 정리하며…

CSS 박스 모델은 단순한 개념 같지만, 레이아웃, 여백, 반응형, UI 구조 등 웹 개발 전반에서 꼭 알아야 할 가장 중요한 개념 중 하나입니다.
padding, border, margin의 차이를 정확히 알고, box-sizing을 적절히 활용해 깔끔한 웹 페이지를 만들어보세요!

 

#CSS박스모델 #boxmodel #margin #padding #border #박스구조 #boxsizing #웹디자인기초 #프론트엔드기초 #CSS기초