---
title: CSS Basic Box Model
slug: Web/CSS/CSS_Box_Model
tags:
- CSS
- CSS Box Model
- Overview
- Reference
translation_of: Web/CSS/CSS_Box_Model
---
{{CSSRef}}
CSS Basic Box Model은 각 요소에 대해 시각적 서식 모델에 따라 생성하고 배치하는 사각형 박스(안팎 여백 포함)를 위한 CSS 모듈입니다.
참고서
속성
박스 내 콘텐츠 흐름을 제어하는 속성
- {{cssxref("overflow")}}
- {{cssxref("overflow-x")}}
- {{cssxref("overflow-y")}}
박스 크기를 제어하는 속성
- {{cssxref("height")}}
- {{cssxref("width")}}
- {{cssxref("max-height")}}
- {{cssxref("max-width")}}
- {{cssxref("min-height")}}
- {{cssxref("min-width")}}
박스의 바깥 여백을 제어하는 속성
- {{cssxref("margin")}}
- {{cssxref("margin-bottom")}}
- {{cssxref("margin-left")}}
- {{cssxref("margin-right")}}
- {{cssxref("margin-top")}}
- {{cssxref("margin-trim")}} {{Experimental_Inline}}
박스의 안쪽 여백을 제어하는 속성
- {{cssxref("padding")}}
- {{cssxref("padding-bottom")}}
- {{cssxref("padding-left")}}
- {{cssxref("padding-right")}}
- {{cssxref("padding-top")}}
기타 속성
- {{cssxref("visibility")}}
안내서
- CSS 박스 모델 입문
- CSS의 기초 개념 중 하나인 박스 모델을 설명합니다. 박스 모델은 CSS가 요소와 요소의 콘텐츠, 안쪽 여백, 테두리, 바깥 여백 영역을 배치하는 법을 정의합니다.
- 여백 상쇄 정복
- 어떤 경우, 두 개의 인접한 바깥 여백은 하나로 상쇄됩니다. 이 글은 상쇄가 언제 어떻게 일어나고 이를 어떻게 제어하는지 설명합니다.
- 시각적 서식 모델
- 시각적 서식 모델을 설명합니다.
명세
명세 |
상태 |
설명 |
{{SpecName("CSS3 Box")}} |
{{Spec2("CSS3 Box")}} |
margin-trim 추가. |
{{SpecName("CSS2.1", "box.html")}} |
{{Spec2("CSS2.1")}} |
|
{{SpecName("CSS1")}} |
{{Spec2("CSS1")}} |
초기 정의 |