CSS 강좌 / 박스 모델과 margin, padding, border 이해하기

CSS 박스 모델은 요소의 영역을 콘텐츠, 안쪽 여백인 padding, 테두리인 border, 바깥 여백인 margin으로 구분합니다. 내용과 테두리를 띄울 때는 padding, 다른 요소와 떨어뜨릴 때는 margin을 사용합니다. 요소가 예상보다 크거나 간격이 맞지 않을 때는 네 영역을 나누어 확인해야 합니다.

박스의 네 영역은 어디에 있을까요?

아래 그림은 네 영역의 위치를 나타냅니다. 파란색 콘텐츠 안에 글자나 이미지가 놓이고, 그 밖을 노란색 padding과 초록색 border가 둘러쌉니다. 주황색 margin은 테두리 밖에 있습니다. 그림의 색은 영역을 구분하기 위한 것이며 margin 자체에 요소의 배경색이 칠해지는 것은 아닙니다.

기본적인 배경색은 콘텐츠와 padding 영역에 보이고 테두리 뒤에도 그려질 수 있습니다. margin 영역에는 그 요소의 배경이 그려지지 않습니다. 따라서 카드의 색칠된 영역을 넓히려면 margin이 아니라 padding을 늘려야 합니다. 배경을 어디까지 그릴지는 별도 속성으로 바꿀 수 있지만 여기서는 기본 동작을 사용합니다.

지정한 너비와 실제 너비 계산하기

.card {
  width: 200px;
  padding: 20px;
  border: 2px solid #2f6e9b;
  margin: 16px;
  background-color: #eaf4fa;
}

일반 div의 기본 box-sizing: content-box에서는 width가 콘텐츠 너비를 뜻합니다. 위 선언의 테두리 바깥까지 너비는 200 + 20×2 + 2×2 = 244px입니다. 좌우 margin은 이 244px에 포함되지 않습니다. 이 예제처럼 좌우 margin이 각각 16px이면 주변 여백까지 더한 가로 길이는 276px입니다. 세로 margin에는 합치기 규칙이 있으므로 높이에서도 모든 여백을 단순히 더한다고 생각하지 마세요.

테두리까지의 너비를 width 안에 넣으려면 box-sizing: border-box를 사용합니다. 같은 선언에서 border-box만 적용하면 테두리까지 200px, 콘텐츠 너비는 156px입니다. 너비 기준의 차이는 다음 강의에서 같은 상자를 나란히 계산하며 확인합니다. 박스 영역의 정의는 MDN의 박스 모델 안내를 참고하세요.

여백을 한 개부터 네 개의 값으로 지정하기

margin도 같은 순서로 값을 지정합니다. 값이 두 개이면 위아래·좌우, 세 개이면 위·좌우·아래, 네 개이면 위에서 시계 방향입니다. 일부 방향만 바꾸려면 padding-top처럼 개별 속성을 사용하세요. 축약 속성을 뒤에 다시 쓰면 앞에서 지정한 개별 값도 바뀔 수 있으므로 적용 순서를 확인합니다.

padding-inline과 margin-block은 글의 쓰기 방향을 기준으로 하는 논리 속성입니다. 일반적인 가로쓰기 한국어에서는 inline이 좌우, block이 위아래에 대응하지만 세로쓰기에서는 물리적인 방향이 달라집니다. 항상 고정된 가로·세로 방향을 뜻하는 것은 아닙니다. MDN의 margin-block 설명에서 방향 대응을 확인할 수 있습니다.

세로 margin이 더해지지 않는 경우

일반 블록 흐름의 인접한 세로 margin은 조건에 따라 하나의 간격으로 합쳐집니다. 이를 margin collapsing, 즉 여백 합치기라고 합니다. 앞 요소의 아래 margin이 20px, 다음 요소의 위 margin이 30px인 양수 여백끼리는 50px이 아니라 큰 값인 30px로 보일 수 있습니다.

이 규칙을 모든 여백에 적용하지 마세요. 좌우 margin과 padding은 같은 방식으로 합쳐지지 않고, Flexbox·Grid 항목의 여백도 일반 블록과 다릅니다. 부모와 자식 사이의 여백이나 음수 margin은 조건이 더 있으므로 이번 실습은 같은 부모 안의 두 형제 요소와 양수 세로 margin으로 제한합니다. 적용 조건은 MDN의 margin 합치기 설명을 참고하세요.

전체 예제를 실행하고 영역 확인하기

아래 코드를 UTF-8의 box-model.html로 저장하고 엽니다. 첫 카드는 네 영역을 확인하고, 점선 상자 안의 두 행은 세로 margin 합치기를 관찰하는 용도입니다. 마지막 상자는 값 세 개의 padding을 보여 줍니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>박스 모델과 여백 실습</title>
  <style>
    body { margin: 16px; font: 16px/1.6 sans-serif; color: #333; }
    .card { width: 200px; padding: 20px; border: 2px solid #2f6e9b;
      margin: 16px; background-color: #eaf4fa; }
    .collapse-demo { max-width: 300px; padding: 8px; border: 1px dashed #777; }
    .row { padding: 8px; background: #e9f7ef; }
    .first { margin-bottom: 20px; }
    .second { margin-top: 30px; }
    .three-values { max-width: 250px; padding: 10px 20px 30px;
      border: 1px solid #b98022; background: #fff4d9; }
  </style>
</head>
<body>
  <h1>박스의 네 영역</h1>
  <div class="card">콘텐츠 너비는 200px입니다. 테두리까지는 244px입니다.</div>
  <h2>세로 여백 합치기</h2>
  <div class="collapse-demo">
    <div class="row first">아래 margin: 20px</div>
    <div class="row second">위 margin: 30px</div>
  </div>
  <h2>세 값으로 padding 지정</h2>
  <div class="three-values">위 10px, 좌우 20px, 아래 30px</div>
</body>
</html>

1. 개발자 도구의 Elements에서 .card를 선택하고 Styles 또는 Computed의 박스 모델 표시를 찾습니다. 콘텐츠 200px, 좌우 padding 20px, border 2px, margin 16px인지 확인하세요.
2. padding만 30px로 바꿉니다. 콘텐츠는 200px을 유지하고 테두리까지의 너비는 264px이 됩니다. 원래 20px로 되돌린 뒤 margin만 32px로 바꾸면 카드 자체의 너비 244px은 그대로이고 주변 간격이 달라집니다.
3. 점선 상자 안의 두 행 사이를 확인합니다. 20px과 30px의 양수 세로 margin이 합쳐져 간격은 30px입니다. 첫 행의 아래 margin을 40px로 바꾸면 간격은 40px이 됩니다. 비교 후 20px로 되돌립니다.
4. .three-values의 아래 padding이 30px, 위가 10px, 좌우가 20px인지 확인합니다. 마지막 30px을 지워 값 두 개로 만들면 아래도 10px이 됩니다.

예상과 다른 간격은 브라우저 기본 p·h1 여백, 더 우선하는 선택자, 여백 합치기 때문에 생길 수 있습니다. 먼저 어떤 요소의 어떤 여백인지 확인하고 한 값씩 바꾸세요. 개발자 도구의 임시 변경은 새로고침하면 사라지고 파일에 저장한 변경은 직접 원래 값으로 되돌려야 합니다.