CSS Box Model

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

 

하나의 박스는 이처럼 네 영역으로 이루어진다. Content, Padding, Border, Margin 영역이 있다.

 

 

• content area
  • 글이나 이미지, 비디오 등 요소의 실제 영역을 포함한다.
  • 배경색과 배경 이미지를 가지고 있기도 한다.
  • box-sizing 속성의 값이 기본 값인 content-box
  • block level의 요소인 경우, 컨텐츠 영역의 크기를 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이 결정한다.
  • 여백 상쇄가 발생하면 요소 간에 바깥 여백이 공유되므로, 여백 영역이 명확하게 결정되지 않는다.
• 비대체 인라인 요소가 차지하는 공간의 크기(줄 높이에 기여하는 양)는, 요소 주위에 테두리와 안쪽 여백이 표시되더라도 line-height 속성으로 결정한다.

 

참고

developer.mozilla.org/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

CSS 기본 박스 모델 입문 - CSS: Cascading Style Sheets | MDN