Box Model
DOM에 레이아웃이 그려질 때, CSS의 표준 영역 모델(CSS basic box model)에 따라서 만들어진다. 이 영역은 size, position, 그리고 그 밖의 여러 속성들에 의해서 만들어진다.
모든 영역은 4개로 나뉘어진다. 이것은 모두 알고 있듯이
- content
- padding
- border
- margin
위 사진은 사실 position 주제 설명할 때랑 거의 같다.
Content Area
content에는, content edge로 둘러쌓여 있으며, 요소의 “real” content를 담고 있는 부분이다. 즉, text, img, video 같은 컨텐츠를 품고 있는 영역이다. 이 영역은 content width, height로 이루어져있다.
Padding Edge
padding은, 그림과 같이 content 영역 다음으로 둘러싸고 있는 영역이다. padding의 width나 height가 0이면, padding edge는 content edge와 같다.
Border Edge
border edge는 마찬가지로 width, height가 0일 경우엔 padding edge와 같다.
Margin Edge / outer Edge
margin edge 또한 위와 같이 width, height가 0이면, border edge와 같다.
background style 같은 경우, content, padding, border area까지 적용이 된다. margin의 background style은 항상 투명하다.
또한, padding, border 모두 width에 포함되지 않는다는 점이다. 그래서 content와 padding, border 길이까지 포함한 width를 계산하려면 content의 width에서 더 더해주어야 한다.
이러한 계산이 귀찮은 경우, box-sizing: border-box로 처리하면, 해당 요소의 width, height는 content의 너비가 아닌 border까지 포함한 길이가 된다. default로는 box-sizing: content-box이다.
margin
margin은 다른 속성들과는 달리 해당 요소와 그 다음 요소들과의 거리를 나타낸다. 그래서 box-sizing과는 상관없이 width에 포함되지 않는다. border까지는 컨텐츠 영역의 테두리라고 표현되지만, margin은 그 밖에 있는 속성이다.
collapse margin
margin으로 요소의 바깥 길이를 줄 때, 때로는 해당 margin이 결합될 수 있다.(collapse) 해당 경우는 다음을 충족할 때 발생한다.
- adjacent siblings
특정 요소들이 같은 containing block 안에 존재할 때, 이를 siblings 관계라고 한다. 인접해있는 siblings 관계의 요소일 경우, 각각의 margin이 결합된다.
- 부모와 자식 요소 간에 분리해주는 요소가 없는 경우
부모의 margin과 자식의 margin에서 그 사이를 분리해주는 border, padding, inline-contents가 존재하지 않는 경우, 해당 margin은 결합되어 부모 바깥의 margin이 된다.
- Empty blocks
만약, 분리되어있는 블록에서 border, padding, inline content나 height 등이 없는 상태로 margin을 갖고 있다면, 해당 분리된 요소들의 margin은 결합된다.