CSS 박스 모델 이해하기 – margin, padding, border 한 번에 정리

CSS 박스 모델 이해하기 – margin, padding, border 한 번에 정리

지난 글에서는 원하는 요소만 골라 스타일을 적용하는 CSS 선택자를 알아보았습니다. 이제 색과 글꼴은 어느 정도 바꿀 수 있게 되었지만, 막상 페이지를 만들어 보면 “글자가 테두리에 너무 붙어 있다”, “상자 사이 간격이 이상하다”, “분명 너비를 300px로 줬는데 더 넓게 나온다” 같은 문제에 부딪히게 됩니다. 이 모든 문제의 답은 박스 모델(Box Model)에 있습니다. 박스 모델은 CSS 레이아웃의 가장 기초가 되는 개념으로, 이것을 이해하지 못하면 여백 하나 맞추는 데도 한참을 헤매게 됩니다. 오늘은 margin, padding, border의 차이부터 box-sizing까지 그림과 예제로 확실하게 정리해 보겠습니다.

1. 박스 모델이란 무엇인가요?

웹 브라우저는 화면에 보이는 모든 HTML 요소를 하나의 사각형 상자로 취급합니다. 제목도, 문단도, 이미지도, 버튼도 눈에 보이지 않을 뿐 각자 사각형 상자를 가지고 있습니다. 그리고 이 상자는 안쪽부터 바깥쪽까지 네 개의 층으로 이루어져 있습니다. 이 구조를 박스 모델이라고 부릅니다.

• content(내용) : 글자나 이미지 같은 실제 내용이 들어가는 영역입니다. width와 height로 크기를 정합니다.
• padding(안쪽 여백) : 내용과 테두리 사이의 공간입니다.
• border(테두리) : 상자의 외곽선입니다.
• margin(바깥 여백) : 테두리 바깥쪽, 다른 요소와의 간격입니다.

택배 상자에 비유하면 이해가 쉽습니다. 상자 안에 담긴 물건이 content, 물건이 깨지지 않도록 채워 넣은 뽁뽁이가 padding, 골판지 상자 자체가 border, 그리고 창고에 상자를 쌓을 때 상자끼리 띄워 두는 간격이 margin입니다.

2. padding – 안쪽 여백

padding은 내용과 테두리 사이를 넓혀 줍니다. padding을 주면 상자 안의 글자가 테두리에 딱 붙지 않고 여유 있게 배치되어 훨씬 읽기 편해집니다. 아래는 padding이 없을 때와 있을 때를 비교한 모습입니다.

중요한 특징이 하나 있습니다. padding 영역에는 배경색이 함께 칠해진다는 점입니다. 위 예시에서 padding을 준 상자는 연한 파란 배경이 더 넓게 보이죠. 그래서 버튼을 만들 때 padding을 주면 글자 크기는 그대로인데 클릭할 수 있는 버튼 면적이 넓어집니다.

3. border – 테두리

border는 상자의 외곽선으로, 두께·모양·색상 세 가지를 지정합니다. 세 값을 한 줄에 순서와 상관없이 적을 수 있습니다.

.box {
  border: 2px solid #264de4;   /* 두께 모양 색상 */
}

테두리 모양은 다음과 같이 여러 가지가 있습니다.

한쪽 면에만 테두리를 줄 수도 있습니다. border-bottom: 2px solid #264de4;처럼 쓰면 아래쪽에만 선이 생기는데, 이 블로그 글의 소제목 밑줄도 이 방법으로 만든 것입니다. 또한 border-radius 속성을 사용하면 모서리를 둥글게 만들 수 있고, 너비와 높이가 같은 상자에 border-radius: 50%;를 주면 완전한 원이 됩니다. 프로필 사진을 동그랗게 만들 때 자주 쓰는 방법입니다.

4. margin – 바깥 여백

margin은 상자 바깥쪽의 여백으로, 다른 요소와의 간격을 조절합니다. padding과 달리 margin 영역은 항상 투명하여 배경색이 칠해지지 않습니다.

.card {
  margin-bottom: 20px;  /* 카드 아래로 20px 띄우기 */
}

padding과 margin이 헷갈린다면 이렇게 기억하세요. “내 안의 공간이 필요하면 padding, 남과의 거리가 필요하면 margin”입니다. 상자 안의 글자가 답답하면 padding을, 상자끼리 너무 붙어 있으면 margin을 늘리면 됩니다.

5. 방향별 지정과 축약형 쓰는 법

margin과 padding은 위·오른쪽·아래·왼쪽 네 방향을 각각 지정할 수 있습니다.

.box {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}

하지만 매번 네 줄씩 쓰기는 번거롭기 때문에 보통 한 줄로 줄여 쓰는 축약형을 사용합니다. 값의 개수에 따라 의미가 달라지니 아래 표를 꼭 익혀 두세요.

값이 4개일 때는 위에서 시작해 시계 방향(위 → 오른쪽 → 아래 → 왼쪽)으로 돈다고 기억하면 쉽습니다. 실무에서는 1개와 2개짜리 축약형을 가장 많이 사용합니다.

6. margin: 0 auto로 가운데 정렬하기

margin에는 숫자 대신 auto를 넣을 수 있습니다. 너비가 정해진 상자에 좌우 margin을 auto로 주면, 브라우저가 남는 공간을 양쪽에 똑같이 나눠 상자가 가로 가운데에 위치하게 됩니다.

.container {
  width: 700px;
  margin: 0 auto;   /* 위아래 0, 좌우 자동 → 가운데 정렬 */
}

이 방법은 블로그나 뉴스 사이트에서 본문을 화면 가운데에 배치할 때 가장 많이 쓰입니다. 실제로 이 글 전체도 max-width: 760px; margin: 0 auto;로 가운데 정렬되어 있습니다. 단, width가 지정되지 않으면 상자가 화면 전체 너비를 차지하기 때문에 가운데 정렬 효과가 나타나지 않으니 주의하세요.

7. 초보자가 꼭 겪는 함정 – 마진 겹침 현상

위아래로 놓인 두 상자 중 위 상자에 margin-bottom: 30px, 아래 상자에 margin-top: 20px를 주면 두 상자 사이 간격은 얼마가 될까요? 많은 분이 50px을 예상하지만, 실제로는 30px입니다.

이것을 마진 겹침(Margin Collapsing)이라고 합니다. 위아래 방향의 margin이 만나면 더해지지 않고 둘 중 큰 값 하나만 적용됩니다. 좌우 방향 margin에서는 이런 현상이 일어나지 않고 그대로 더해집니다. 버그처럼 보이지만 CSS의 정해진 규칙이며, 문단과 문단 사이 간격이 지나치게 벌어지지 않도록 하기 위해 만들어졌습니다. 간격이 예상보다 좁게 나온다면 이 현상을 먼저 떠올려 보세요. 헷갈림을 줄이려면 간격을 한쪽 방향(예: margin-bottom)으로만 주는 습관을 들이는 것이 좋습니다.

8. 너비가 왜 커질까? – box-sizing

박스 모델에서 가장 많은 사람을 혼란스럽게 하는 부분입니다. 다음 코드를 보세요.

.box {
  width: 300px;
  padding: 20px;
  border: 5px solid #264de4;
}

이 상자의 실제 너비는 몇 px일까요? 정답은 300px이 아니라 350px입니다. CSS의 기본 설정(content-box)에서는 width가 내용 영역만의 너비를 뜻하기 때문에, 여기에 양쪽 padding과 border가 더해집니다.

이렇게 계산하는 방식은 매우 불편합니다. padding을 조금만 바꿔도 전체 너비가 달라져 레이아웃이 깨지기 때문입니다. 그래서 대부분의 개발자는 CSS 파일 맨 위에 아래 코드를 넣고 시작합니다.

* {
  box-sizing: border-box;
}

border-box로 바꾸면 width가 테두리까지 포함한 전체 너비가 됩니다. width를 300px로 주면 padding과 border를 얼마로 바꾸든 상자는 항상 300px로 유지되고, 대신 내용 영역이 그만큼 줄어듭니다. 지난 글의 실습 코드에서 전체 선택자로 이 설정을 넣었던 이유가 바로 이것입니다. 사실상 모든 현대 웹사이트의 표준 설정이니 꼭 기억해 두세요.

9. 블록 요소와 인라인 요소의 차이

박스 모델이 모든 요소에 똑같이 적용되는 것은 아닙니다. HTML 요소는 크게 블록 요소와 인라인 요소로 나뉩니다.

• 블록 요소 (div, p, h1~h6, section 등) : 한 줄 전체를 차지하고, 다음 요소는 아래 줄로 내려갑니다. width, height, margin, padding이 모두 정상 적용됩니다.
• 인라인 요소 (span, a, strong 등) : 내용만큼만 공간을 차지하고 옆으로 나란히 놓입니다. width와 height가 적용되지 않으며, 위아래 margin도 무시됩니다.

링크(a 태그)에 width나 위아래 margin을 줬는데 아무 변화가 없다면 인라인 요소이기 때문입니다. 이럴 때는 display: inline-block;을 추가하면 옆으로 나란히 놓이면서도 박스 모델 속성이 모두 적용됩니다. 메뉴 버튼을 만들 때 자주 쓰는 방법입니다.

10. 개발자 도구로 박스 모델 확인하기

여백이 어디서 생기는지 모를 때는 브라우저의 개발자 도구가 큰 도움이 됩니다. 크롬에서 확인하고 싶은 요소에 마우스 오른쪽 버튼을 눌러 “검사”를 선택하면 개발자 도구가 열립니다. 오른쪽 스타일 창을 아래로 내리면(또는 Computed 탭을 누르면) 이 글 처음에 본 것과 같은 네 겹의 박스 그림이 나타나고, 각 영역의 정확한 px 값이 표시됩니다. 요소 위에 마우스를 올리면 화면에서도 content는 파란색, padding은 초록색, margin은 주황색으로 표시되어 여백의 정체를 한눈에 알 수 있습니다.

11. 실습: 박스 모델로 프로필 카드 만들기

오늘 배운 내용을 모두 활용해 프로필 카드를 만들어 보겠습니다. 아래 코드를 card.html로 저장해 브라우저에서 열어보세요.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>박스 모델 실습</title>
  <style>
    * { box-sizing: border-box; }

    body {
      background: #f5f7fb;
      font-family: sans-serif;
    }

    .profile-card {
      width: 300px;
      margin: 60px auto;          /* 가운데 정렬 */
      padding: 30px 24px;         /* 위아래 30, 좌우 24 */
      background: white;
      border: 1px solid #ddd;
      border-radius: 12px;
      text-align: center;
    }

    .avatar {
      width: 90px;
      height: 90px;
      margin: 0 auto 16px;        /* 가운데 + 아래 16px */
      background: #bbdefb;
      border: 4px solid #264de4;
      border-radius: 50%;         /* 동그랗게 */
    }

    .profile-card h2 {
      margin: 0 0 6px;
      font-size: 20px;
    }

    .profile-card p {
      margin: 0 0 20px;
      color: #666;
    }

    .btn {
      display: inline-block;      /* a 태그에 여백 적용 */
      padding: 10px 24px;
      background: #264de4;
      color: white;
      border-radius: 6px;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <div class="profile-card">
    <div class="avatar"></div>
    <h2>홍길동</h2>
    <p>웹 개발을 공부하는 입문자</p>
    <a href="#" class="btn">블로그 방문하기</a>
  </div>
</body>
</html>

완성된 카드는 다음과 같은 모습입니다.

코드의 주석을 따라가며 각 여백이 어떤 역할을 하는지 확인해 보세요. 카드는 margin: 0 auto로 가운데에 놓였고, padding 덕분에 내용이 테두리에서 적당히 떨어져 있습니다. 프로필 원은 border-radius: 50%로 동그랗게 만들었고, 인라인 요소인 a 태그에는 display: inline-block을 줘서 padding이 제대로 적용된 버튼이 되었습니다. padding 값을 바꿔 보면서 box-sizing 덕분에 카드 너비가 300px로 유지되는 것도 직접 확인해 보세요.

12. 박스 모델에서 자주 하는 실수

• 상자가 화면 밖으로 넘쳐요 : width: 100%에 padding을 함께 주면 content-box에서는 100%보다 커집니다. box-sizing: border-box를 설정하세요.
• 간격이 예상보다 좁아요 : 위아래 margin이 겹쳐서 큰 값 하나만 적용된 경우입니다. 마진 겹침 현상을 떠올려 보세요.
• margin: 0 auto가 안 먹혀요 : width가 지정되지 않았거나, 대상이 인라인 요소인 경우입니다.
• a, span에 여백이 안 들어가요 : 인라인 요소는 width, height, 위아래 margin이 적용되지 않습니다. display: inline-block을 추가하세요.
• 페이지 가장자리에 흰 여백이 생겨요 : 브라우저가 body에 기본으로 8px 정도의 margin을 넣기 때문입니다. body { margin: 0; }으로 없앨 수 있습니다.

마무리하며

오늘은 모든 HTML 요소가 가지고 있는 보이지 않는 상자, 박스 모델에 대해 알아보았습니다. 안쪽부터 content, padding, border, margin 순서로 쌓인다는 구조와 “내 안의 공간은 padding, 남과의 거리는 margin”이라는 차이만 확실히 기억해도 여백 문제의 대부분을 해결할 수 있습니다. 여기에 축약형의 시계 방향 규칙, margin: 0 auto 가운데 정렬, 마진 겹침 현상, 그리고 모든 현대 웹사이트가 사용하는 box-sizing: border-box까지 알아두면 레이아웃을 훨씬 자신 있게 다룰 수 있을 것입니다.

다음 글에서는 페이지의 분위기를 결정하는 CSS 색상과 글꼴 꾸미기를 다루겠습니다. 색상 코드 읽는 법과 구글 폰트를 적용하는 방법까지 알아볼 예정입니다. 궁금한 점은 댓글로 남겨 주세요!