1mo.dev

다크 모드

박스 모델 (padding · margin · box-sizing · overflow) ​

박스 모델의 기본 구조부터 padding/margin 지정과 마진 상쇄, 그리고 border, box-sizing, overflow까지 박스와 관련된 속성을 한 페이지에 모았습니다.

CSS 박스 모델 ​

웹페이지의 모든 요소는 눈에 보이지 않는 네모난 박스로 이루어져 있습니다. 이걸 **박스 모델(Box Model)**이라고 부릅니다. 하나의 박스는 안쪽부터 바깥쪽까지 4개 영역이 겹겹이 쌓인 구조입니다.

┌─────────────────── margin (바깥 여백) ───────────────────┐
│  ┌───────────────── border (테두리) ─────────────────┐  │
│  │  ┌─────────────── padding (안쪽 여백) ───────────┐ │  │
│  │  │           content (실제 내용)              │ │  │
│  │  └─────────────────────────────────────────┘ │  │
│  └───────────────────────────────────────────────┘  │
└───────────────────────────────────────────────────────┘
  • content: 글자나 이미지 등 실제 내용이 들어가는 영역
  • padding: 내용과 테두리 사이의 안쪽 여백
  • border: 박스를 감싸는 테두리
  • margin: 다른 박스와의 사이를 벌리는 바깥 여백

박스를 상자에 물건을 담아 포장하는 과정으로 비유하면, content는 물건, padding은 완충재, border는 상자 벽, margin은 상자와 상자 사이에 두는 간격이라고 생각하면 됩니다.

박스의 크기는 width(너비)와 height(높이) 속성으로 직접 지정할 수 있고, padding/margin은 위·아래·좌·우 방향별로 다르게 줄 수 있습니다. 개발자 도구의 Computed 탭에 들어가면 지금 선택한 요소의 박스 모델 4개 영역이 실제로 몇 px인지 그림으로 확인할 수 있습니다.

padding, margin과 마진 상쇄 ​

padding과 margin 한 번에 지정하기 ​

padding(안쪽 여백)과 margin(바깥 여백) 모두, 위/오른쪽/아래/왼쪽 값을 한 줄에 순서대로 적을 수 있습니다. 순서는 시계 방향으로 상 → 우 → 하 → 좌입니다.

css
padding: 16px 8px 24px 10px;

이걸 방향별 속성으로 풀어 쓰면 완전히 같은 뜻입니다.

css
padding-top: 16px;
padding-right: 8px;
padding-bottom: 24px;
padding-left: 10px;

margin도 똑같은 방식입니다.

css
margin: 16px 8px 24px 10px;
/* 아래와 동일 */
margin-top: 16px;
margin-right: 8px;
margin-bottom: 24px;
margin-left: 10px;

마진 상쇄 (Margin Collapsing) ​

세로 방향(margin-top, margin-bottom) 마진은 서로 더해지지 않고 겹칩니다. 이웃한 두 요소의 세로 마진이 만나면, 두 값 중 더 큰 값 하나만 적용됩니다. 이걸 마진 상쇄라고 부릅니다.

원하는 만큼 세로 간격이 안 나온다면, 마진을 잘못 계산해서가 아니라 이 마진 상쇄 때문일 가능성이 높습니다.

부모-자식 사이에서도 발생 ​

html
<div id="a">a</div>
<div id="b">
  <div id="c">c</div>
  b
</div>
css
#a { margin: 30px; }
#b { margin: 20px; }
#c { margin: 40px; }

#b와 #c는 부모-자식 관계입니다. #b에 테두리나 패딩이 따로 없으면, 자식 #c의 위쪽 마진(40px)이 부모 #b의 위쪽 마진(20px)과 겹쳐서 둘 중 큰 값인 40px이 적용됩니다. 이 40px이 다시 이웃한 #a의 아래쪽 마진(30px)과 겹치면서, 결국 #a와 #b 사이의 실제 간격은 40px이 됩니다.

단, 부모 요소에 padding이나 border가 있으면 부모-자식 사이의 마진 상쇄는 일어나지 않습니다. 세로 간격이 예상과 다르게 나온다면, 이 마진 상쇄 현상부터 의심해보면 됩니다.

border, box-sizing, overflow ​

border와 border-radius ​

border는 요소에 테두리(선)를 만드는 속성입니다.

css
.box {
  border: 2px solid #333333;
  /*      두께 스타일 색 */
}

모서리를 둥글게 만들고 싶으면 border-radius를 씁니다.

css
.box {
  border-radius: 12px;
}

border와 border-radius는 카드, 버튼 등 어디서나 자주 쓰이는 속성이니 꼭 기억해두는 게 좋습니다.

box-sizing ​

박스 모델에서 width/height는 기본적으로 content 영역만의 크기를 뜻합니다. 즉, width: 200px이라고 지정해도 여기에 padding과 border가 더해지면 실제 박스는 200px보다 커집니다.

css
.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  /* 실제 너비 = 200 + 20*2 + 5*2 = 250px */
}

레이아웃을 짤 때 이 계산 때문에 예상보다 박스가 커져서 배치가 틀어지는 문제가 자주 생깁니다. 이럴 때 box-sizing: border-box;를 지정하면, width/height가 padding과 border까지 포함한 전체 크기를 뜻하게 바뀝니다.

css
.box {
  box-sizing: border-box;
  width: 200px; /* padding, border 포함해서 실제로 딱 200px */
  padding: 20px;
  border: 5px solid black;
}

결론적으로, 레이아웃 계산을 훨씬 예측하기 쉬워지기 때문에 box-sizing: border-box를 기본값처럼 깔고 시작하는 경우가 많습니다.

overflow ​

긴 내용을 작은 박스(컨테이너)에 담으면, 내용이 박스 밖으로 삐져나오는 현상이 생길 수 있습니다. 이걸 **오버플로우(overflow)**라고 합니다. overflow 속성으로 이 넘치는 내용을 어떻게 처리할지 정할 수 있습니다.

css
.container {
  overflow: hidden;  /* 넘치는 부분을 잘라서 숨김 */
  /* 또는 */
  overflow: scroll;  /* 스크롤을 만들어서 넘긴 부분을 볼 수 있게 함 */
}

가로 스크롤을 만들고 싶다면 overflow-x를 활용하면 됩니다. 참고로 마우스 사용자는 Shift 키를 누른 채 휠을 돌리면 가로 스크롤을 조작할 수 있습니다. 약관처럼 긴 텍스트를 작은 박스 안에 깔끔하게 담을 때 실무에서 자주 쓰는 기법입니다.

정리 ​

개념한 줄 요약
박스 모델content → padding → border → margin, 안에서 바깥 순서
padding / margin안쪽/바깥쪽 여백, 상-우-하-좌 순서로 한 번에 지정 가능
마진 상쇄세로 마진은 더해지지 않고 겹쳐서 큰 값만 적용된다
border-radius테두리 모서리를 둥글게 만든다
box-sizing: border-boxwidth/height에 padding·border까지 포함시켜 계산을 쉽게
overflow박스보다 넘치는 내용을 자르거나(hidden) 스크롤로(scroll) 처리

참고: 개인 Notion 학습 노트