모든 레이아웃의 시작, Box Model

CSS에서 모든 HTML 요소는 하나의 박스(Box) 로 표현된다.
이 박스가 어떤 구조로 이루어져 있는지를 정의하는 것이 Box Model 이다.
레이아웃을 다루기 전에 반드시 이해해야 하는 개념이다.

Box Model은 안쪽에서 바깥쪽으로 4가지 영역으로 구성된다.

box model 구조

Box Model에서 주의해야 할 점이 있다.
기본적으로 width와 height는 content 영역만의 크기를 의미한다.
즉, padding과 border가 추가되면 실제 요소의 크기는 더 커진다.

실제 너비 = 200 + 202 + 12 = 242px

이 문제를 해결하는 속성이 box-sizing 이다.
border-box 사용하면, width 안에 padding, border 포함된다.

box model margin01
상하로 인접한 두 요소의 margin은 합산되지 않고, 더 큰 값 하나만 적용된다.


/* 두 요소 사이 간격: 50px이 아니라 30px */
.a { margin-bottom: 30px; }
.b { margin-top: 20px; }

box model margin02
좌우로 인접한 두 요소의 margin은 상쇄되지 않는다.(상하 margin에서만 발생)


/* 두 요소 사이 간격: 50px */
.a { margin-right: 30px; }
.b { margin-left: 20px; }