문서의 레이아웃에서, 브라우저의 렌더링 엔진은 표준 CSS 기본 박스 모델에 따라 각 요소를 사각형 상자(박스)로 표현합니다. CSS는 상자의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 결정합니다.

하나의 박스는 각자의 테두리에 의해 정해지는 네 부분(또는 영역)으로 이루어집니다. 각 영역은 콘텐츠 영역, 안쪽 여백(패딩) 영역, 테두리 영역, 그리고 바깥 여백(마진) 영역이라고 부릅니다.

CSS Box model

콘텐츠 영역content area은 콘텐츠 경계content edge가 감싼 영역으로, 글이나 이미지, 비디오 등 요소의 실제 내용을 포함합니다. 콘텐츠 영역의 크기는 콘텐츠 너비(콘텐츠 박스 너비)와 콘텐츠 높이(콘텐츠 박스 높이)입니다. 배경색과 배경 이미지를 가지고 있기도 합니다.

box-sizing 속성의 값이 기본값인 content-box인 경우 콘텐츠 영역의 크기를 width, min-width, max-width, height, min-height, max-height 속성을 사용해 사용해 명시적으로 설정할 수 있습니다.

안쪽 여백 영역(패딩 영역)padding area은 안쪽 여백 경계padding edge가 감싼 영역으로, 콘텐츠 영역을 요소의 안쪽 여백까지 포함하는 크기로 확장합니다. 영역의 크기는 안쪽 여백 박스 너비와 안쪽 여백 박스 높이입니다.

안쪽 여백의 두께는 padding-top, padding-right, padding-bottom, padding-left와 단축 속성인 padding이 결정합니다.

테두리 영역border area은 테두리 경계border edge가 감싼 영역으로, 안쪽 여백 영역을 요소의 테두리까지 포함하는 크기로 확장합니다. 영역의 크기는 테두리 박스 너비와 테두리 박스 높이입니다.

테두리의 두께는 border-width와 단축 속성인 border가 결정합니다. box-sizing 속성의 값이 border-box라면 테두리 영역의 크기를 width, min-width, max-width, height, min-height, max-height 속성을 사용해 명시적으로 설정할 수 있습니다. 박스에 배경(background-color 또는 background-image)이 있으면 테두리의 바깥 경계까지 늘어나 테두리 아래에 위치합니다. 이런 행동은 background-clip 속성으로 바꿀 수 있습니다.

바깥 여백 영역(마진 영역)margin area은 바깥 여백 경계margin edge가 감싼 영역으로, 테두리 요소를 확장해 요소와 인근 요소 사이의 빈 공간까지 포함하도록 만듭니다. 영역의 크기는 바깥 여백 박스 너비와 바깥 여백 박스 높이입니다.

바깥 여백 영역의 크기는 margin-top, margin-right, margin-bottom, margin-left와 단축 속성인 margin이 결정합니다. 여백 상쇄margin collapsing가 발생할 때는 요소간에 바깥 여백이 공유되므로 여백 영역이 명확하게 결정되지 않습니다.

끝으로, 비대체non-replaced 인라인 요소가 차지하는 공간의 양(줄 높이에 기여하는 양)은, 요소 주위에 테두리와 내부 여백이 표시되더라도 line-height 속성이 결정한다는 점을 주의하세요.

명세

Specification Status Comment
CSS Basic Box Model Working Draft  
CSS Level 2 (Revision 1) Recommendation Though more precisely worded, there is no practical change.
CSS Level 1 Recommendation Initial definition.

같이 보기

문서 태그 및 공헌자

이 페이지의 공헌자: mdnwebdocs-bot, alattalatta, KwangseokWon, Netaras
최종 변경자: mdnwebdocs-bot,