English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
CSS 박스 모델은 웹 페이지에서 요소를 직관적으로 배치하는 방법을 설명합니다.
표시할 수 있는 각 요소는 하나 이상의 사각형 상자를 포함하고 있습니다. CSS 상자 모델은 이러한 사각형 상자가 웹 페이지에서 어떻게 배치되는지 설명합니다. 이 상자는 다른 속성을 가질 수 있으며 서로 다른 방식으로 상호작용할 수 있지만, 각 상자는 항상 내용 영역 및 선택 사항의 주위 마진, 마진 및 경계를 가지고 있습니다.
아래 그림은 margin, padding, border CSS 속성이 웹 페이지에서 요소가 차지할 수 있는 공간을 어떻게 결정하는지 보여줍니다.
일반적으로 CSS를 사용할 때 width및height속성이 요소의 너비와 높이를 설정할 때, 실제로는 요소 내용 영역의 너비와 높이를 설정하고 있습니다. 요소 상자의 실제 너비와 높이는 여러 가지 요인에 따라 결정됩니다.
요소 상자가 사용할 수 있는 실제 공간은 다음과 같이 계산됩니다:
| 상자 크기 | CSS 속성 |
|---|---|
| 총 너비 | 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 |
다음 장에서 다른 속성의 사용법이 제공됩니다.
주의:CSS 상자 모델에서; 요소 상자의 내용 영역은 텍스트, 이미지, 목록, 테이블, 양식, 비디오 등을 표시하는 영역입니다.