[CSS] CSS Box Model

 

1. Box Model ?

 - 웹 페이지에 표시할 수 있는 모든 요소는 하나 이상의 직사각형 상자로 구성된다.

 - CSS Box model은 일반적으로 이러한 직사각형 상자가 웹 페이지에 배치되는 방식을 설명한다.

 - 이러한 상자는 서로 다른 속성을 가질 수 있고 서로 다른 방식으로 상호작용할 수 있다.

 - 모든 상자에는 콘텐츠 영역과 패딩, 테두리, 여백 영역이 있다.

 

<CSS Box Model>

 

 - 패딩은 요소의 콘텐츠와 테두리(또는 테두리가 없는 경우 상자 가장자리) 사이의 투명한 공간

 - 여백은 테두리 주변의 공간.

 - 또한, 요소에 배경색이 있는 경우 패딩 영역을 통해 표시된다.

 - 여백 영역은 항상 투명하게 유지되며 요소의 배경색에 영향을 받지 않지만 부모 요소의 배경색를 통해 보이게 한다.

 

 

2. 요소의 너비와 높이

 - 일반적으로 CSS width 및 height 속성을 사용하여 요소의 너비와 높이를 설정할 때 실제로는 해당 요소의 콘텐츠 영역의 너비와 높이만 설정한다.

 - 요소의 box가 웹 페이지에서 차지할 수 있는 실제 공간은 다음과 같다.

구분	상자 크기
총 폭	width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
총 높이	height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom