CSS의 Box Model (Padding, Margin, Border)

Box Model이란?

CSS는 모두 박스 형태로 이루어져있다. 이것을 CSS의 Box Model 이라고 한다. 이해하기 전에 아래의 그림을 먼저 보겠다. 개발자 도구에서 볼 수 있는 그림이다.

• Content: 우리가 실제로 눈으로 보는 내용물 (사진에서는 파란색 박스)
• Padding: 내용물을 감싸고 있는 여백 영역 (안 쪽 여백)
• Border: 내용물을 감싸고 있는 최종적인 외곽선
• Margin: 내용물을 감싸고 있는 외곽선 밖의 여백 영역 (바깥 쪽 여백)

Box Model의 CSS 속성

Content

내용물이 어떤 것인지에 따라 다르다. 내용물이 글자라면 글자와 관련된 꾸밈 효과를 설정할 수도 있고 이미지라면 이미지와 관련된 꾸밈 효과를 설정할 수 있다.

그러나 기본적으로 박스 모델 자체는 아래와 같이 설정하는 경우가 많다.

• height: 500px; (높이)
• width: 500px; (너비)
• min-width, max-width: 500px; (최소 높이와 최대 높이, 너비도 마찬가지)

Padding

안 쪽 여백.

• padding-top: 5px; (위쪽 여백)
• padding-right: 5px; (오른쪽)
• padding-bottom: 5px; (아래쪽)
• padding-left: 5px; (왼쪽)
• padding: 5px; (전 방향 동시에 5px로 내부 여백 설정)

그런데 padding과 margin은 top, right, bottom, left를 나눠 쓰지 않고, 한꺼번에 쓰는 경향이 있다.

.div1 {
  border: 2px solid #333;
  padding: 10px 4px 20px 30px;
}

밑에서 border에 대해서도 다루지만 위처럼 한 꺼번에 사용하는 경우가 많다.

padding과 margin은 상, 우, 하, 좌로 해서 머리부터 시계방향으로 4개의 값이 할당된다.
그런데 값이 1~3개 있을 때도 있는데 이런 경우는 아래와 같다.

/* 값이 3개 */

border: 1px 2px 3px; /* 상 / 좌우 / 하 */

/* 값이 2개 */

border: 1px 2px; /* 상하 / 좌우 */

/* 값이 1개 */

border: 1px; /* 상하좌우 */

값이 4개일 때 상-우-하-좌인 것은 12시부터 시계방향이니까 이해하기 쉽다.
그리고 값이 2개일 때도 상하-좌우인 것도 이해하기 쉽다.
그런데 값이 3개일 때 상-좌우-하인 것은 이해하기 어려울 수 있다. 이유는 일반적으로 문서에서 CSS를 설정할 때 상-하의 여백은 다르게 설정하더라도 좌-우는 대칭적으로 하는 경우가 대부분이기 때문이다.
즉 위 사진에서 Content의 Padding은 극단적으로 보여주기 위해 설정한 것이지, 상하의 여백은 다르더라도 좌-우는 대칭적으로 하는 경우가 많기 때문에, 속성의 값을 3개만 넣었을 때 좌-우는 동일하게 처리한다는 점을 기억하면 된다.

border

외곽선 설정.

• border-width: 2px; (외곽선의 두께 설정)
• border-style: solid or dashed(선으로 이루어진 점선) or dotted(점선);
• border-color: red; (외곽선의 색상 설정)
• border-radius: 15px; (외곽선의 둥글기 설정)
• border: 1px solid black; (외곽선 전체 설정)

<div class="my-box">Content</div>

.my-box {
  height: 300px;
  width: 300px;
  padding: 15px;
  border-style: dashed;
  border-color: red;
  border-radius: 15px;
}

border: 1px solid #333 과 같은 속성 값의  순서

border: [width] [style] [color]

위 순서가 헷갈릴 수 있는데, 우리가 그림을 그릴 때 즉 브라우저가 화면에 박스를 렌더링 할 때 어떤 순서로 할 것 같은지 생각해보면 된다.

1. 먼저 박스를 그릴 공간을 확보하고 (외곽선의 두께가 얼만큼인지)
2. 실선, 점선 등 어떤 외곽선으로 그릴지 결정하고
3. 마지막으로 어떤 색으로 그릴지 결정한다.

border: solid 1px #333과 같이 순서를 바꿔서 작성하면 브라우저는 이 CSS를 해석하지 못해서 오류가 난다. 순서가 중요하다.

Margin

바깥 여백 설정.

• margin-top: 15px;
• margin-right: 15px;
• margin-bottom: 15px;
• margin-left: 15px;
• margin: 전 방향 바깥 여백 설정

box-sizing

박스 모델의 사이즈를 content를 기준으로 할 지, border를 기준으로 할 지 정하는 방법이다.
별도로 설정하지 않는다면 모든 요소들은 content-box로 기본 설정되어있다.

box-sizing: content-box; /* 기본값, 실제로 이런 속성은 없음(편의상) */
box-sizing: border-box;

 

위 코드를 보면 content-box;라는 값을 설명했는데 별도로 box-sizing을 설정하지 않으면 설정되는 기본 값이 content를 기준으로 한다는 점을 설명하기 위해서 명시한 것이고 실제로 이런 속성 값은 없다. 즉 box-sizing: border-box;만 있다.

box-sizing: content-box(기본 값일 때)

box-sizing: border-box; 속성을 넣었을 때

 

box-sizing: border-box; 속성을 넣으면 .div1 박스 모델의 너비를 300px로 해놓은 게 그대로 적용된다. 하지만 이 속성을 넣지 않으면 content를 기준으로 width를 그려 넣기 때문에 좌우 padding 30px 씩을 더해서 360px로 렌더링 되게 된다.

즉 border-box를 지정하지 않으면 순수하게 content 영역의 너비만 300px이 된다는 거고, 그러면 border의 너비가 padding까지 포함되어서 360px로 표현되기 때문에 개발자는 300px만큼 그림이 그려지길 바라는 경우가 많아서 인지 불일치의 문제가 발생한다. 따라서 정확하게 렌더링하고 싶다면 box-sizing: border-box; 속성을 넣어주는 것이 직관적이다.