CSS 박스 모델

CSS 박스 모델은 HTML 요소들이 화면에서 차지하는 공간을 정의하는 모델입니다.

각각의 HTML 요소는 박스(Box)로 취급되며, 이 박스는 크기, 여백, 테두리 등의 속성을 가지고 있습니다.

박스 모델은 크게 Content, Padding, Border, Margin으로 구성됩니다.

Content

: 요소가 실제로 차지하는 공간으로, 내용이 위치하는 영역입니다. Content의 크기는 width와 height 속성을 사용하여 정의합니다.

Padding

: Content 영역과 Border 영역 사이의 간격입니다. Padding은 Content 영역의 크기에 영향을 주지 않습니다. Padding의 크기는 padding-top, padding-right, padding-bottom, padding-left 속성을 사용하여 정의합니다.

Border

: Padding 영역과 Margin 영역 사이에 위치하며, 요소의 테두리를 둘러싸는 영역입니다. Border의 크기는 border-width, border-style, border-color 속성을 사용하여 정의합니다.

Margin

: Border 영역과 다른 요소와의 간격을 나타내는 영역입니다. Margin은 요소의 외부 여백으로, 다른 요소와의 간격을 늘리거나 줄이는 데 사용됩니다. Margin의 크기는 margin-top, margin-right, margin-bottom, margin-left 속성을 사용하여 정의합니다.