D'story

CSS 상자 모델(Box Model)

페이지에 띄울 박스를 생성하기 위해 박스의 바깥쪽 여백(margin), 테두리(border), 안쪽 여백(padding), 콘텐츠(contents) 등의 작동 방식을 정의한다.

display 속성이 block인 블록 박스에 적용되며, 인라인 박스에는 일부만 적용된다. 여기에 대해서는 따로 정리하겠다.

표준 CSS 상자 모델(Standard CSS Box Model)

상자의 실제 너비는 CSS에 정의된 width + padding + border-width 이다. width의 값은 border-width와 padding을 제외한, 순수한 콘텐츠 영역의 너비만을 의미한다.

대체 CSS 상자 모델(Alternative CSS Box Model)

box-sizing: border-box를 설정하면 적용된다.

이 모델에서는 width 자체가 padding과 border-width를 모두 포함한 실제 상자의 전체 너비를 의미하므로, 콘텐츠 영역의 너비를 구하려면 width에서 padding + border-width 를 빼야 한다.

여담

• 아래 MDN 페이지에서 제공하는 Interactive Editor 너무 마음에 든다. 코드에 따른 변화를 바로 감지할 수 있다.

참고