CSS에서는 Element를 나타내기 위한 공간을 Box의 형태로 정의합니다. 하나의 Element는 아래와 같은 박스의 형태로 그려지게 됩니다.
CSS Box Model
Content가 표시되는 영역이 우리가 HTML 문서에 작성한 부분입니다. Content 영역과 테두리 사이의 공간을 Padding이라고 하고 어떤 Element의 테두리와 다른 Element의 테두리 사이의 공간을 Margin이라고 합니다.
.box {
width: 350px;
height: 150px;
margin: 10px;
padding: 25px;
border: 5px solid black;
}
즉, 우리가 위와 같이 CSS 문서를 작성하여 Content 영역의 크기를 정하면 아래의 그림과 같이 Box Model이 구성되게 됩니다.
그런데 이렇게 Box Size를 정의하게 되면 웹 페이지 디자인에 있어 헷갈리는 부분이 생기게 됩니다. 웹 페이지 디자인을 하다보면 테두리와 테두리 사이의 공간을 폭과 높이로 정의하고 싶어집니다. 이럴 경우 CSS의 box-sizing 속성을 이용하면 됩니다.
.box {
width: 350px;
height: 150px;
margin: 10px;
padding: 25px;
border: 5px solid black;
/* box-sizing */
box-sizing: border-box;
}
한 Element의 테두리와 다른 Element의 테두리 사이를 Margin이라고 정의했습니다. 따라서 CSS Box Model에서, Margin은 top, bottom, left, right의 네 방향으로 존재합니다.
top과 bottom 방향의 Margin에서, Margin Collapsing이라는 특이 현상이 발생합니다. 세로 방향의 Margin의 영역이 겹치는 경우, 더 큰 값을 가지는 Margin이 적용되게 됩니다. 아래의 예제를 봅시다.
.one {
margin-bottom: 40px;
}
.two {
margin-top: 10px;
}
<div class="container">
<div class="one"></div>
<div class="two"></div>
</div>
이 경우 div.one의 bottom margin과 div.two의 top margin의 영역이 겹치므로 두 margin 중 더 큰 값인 div.one의 margin-bottom이 적용되게 됩니다. 따라서, CSS 문서를 아래와 같이 바꾸더라도 웹 브라우저에 표시되는 정보에는 변함이 없습니다.
.one {
margin-bottom: 40px;
}
.two {
margin-top: 30px;
}