박스 모델은 웹페이지에서 요소가 얼마나 많은 공간을 차지하는지 설명합니다. 액자에 넣은 그림처럼 그림 주위에는 매트가 있고, 테두리가 이를 감싸며, 빈 벽 공간이 다른 그림과 떨어뜨립니다.
웹페이지의 상자 안에서는 콘텐츠 바깥에 패딩이 있고 그다음 테두리가 있으며 바깥쪽에 마진이 있습니다. 각 층은 요소의 전체 크기와 주변 요소와의 간격에 영향을 줍니다.
층을 이해하면 카드가 안에 든 이미지나 글자보다 더 많은 공간을 차지하는 이유를 알 수 있습니다. 내부 여유 공간이나 다른 항목과의 간격을 바꾸려면 알맞은 층을 조정하세요.