CSS box model

CSS에서 박스는 콘텐츠 영역을 포함하며, 이는 텍스트, 이미지, 혹은 HTML 요소들로 이루어져 있습니다. 이 요소들의 각 면은 안쪽 여백, 테두리, 또는 바깥 여백으로 감싸질 수 있습니다. 박스 모델은 이 요소들을 함께 사용함으로써 박스를 CSS로 표현하는 방식을 설명합니다. 더 많은 정보는 CSS 기본 박스 모델 입문에서 확인할 수 있습니다.

박스 모델 명세서는 각각의 테두리에 해당하는 키워드들을 정의하며, 이러한 키워드들은 CSS에서 속성으로 사용됩니다. 예로, 박스 모델의 크기를 계산하는 box-sizing 속성의 값으로 사용할 수 있습니다.

content-box

박스의 콘텐츠 영역의 경계.

padding-box

안쪽 여백 영역의 경계. 안쪽 여백이 없을 시, content-box과 동일합니다.

border-box

박스 테두리의 경계. 테두리가 없을 시, padding-box과 동일합니다. padding-box.

margin-box

바깥 여백의 경계. 바깥 여백이 없을 시, border-box과 동일합니다.

stroke-box

SVG의 stroke bounding box. CSS에서는 content-box과 동일합니다.

view-box

SVG에서 가장 가까운 SVG 뷰포트 요소의 원점 상자를 의미합니다. 이 상자는 해당 요소에 대한 viewBox 속성에 의해 설정된 초기 SVG 사용자 좌표계의 너비와 높이를 가진 직사각형입니다. CSS에서는 border-box와 동일합니다.

박스의 바깥 여백을 제어하는 속성

바깥 여백은 박스의 테두리 가장자리를 둘러싸고 박스 사이에 공간을 제공합니다.

• margin
• margin-bottom
• margin-left
• margin-right
• margin-top
• margin-trim Experimental

박스의 안쪽 여백을 제어하는 속성

안쪽 여백은 내용 가장자리와 테두리 가장자리 사이에 삽입됩니다.

• padding
• padding-bottom
• padding-left
• padding-right
• padding-top

기타 속성

박스 모델과 관련된 다른 속성들은 다른 곳에 정의되어 있습니다.

테두리

테두리 속성은 가장자리의 두께, 테두리 스타일, 색상을 정의합니다.

Overflow

박스에 들어갈 내용이 너무 많을 때 발생하는 작업을 제어합니다.

CSS 박스 모델 입문

CSS의 기초 개념 중 하나인 박스 모델을 설명합니다. 박스 모델은 CSS가 요소와 요소의 콘텐츠, 안쪽 여백, 테두리, 바깥 여백 영역을 배치하는 법을 정의합니다.

여백 상쇄 정복

어떤 경우, 두 개의 인접한 바깥 여백은 하나로 상쇄됩니다. 이 글은 상쇄가 언제 어떻게 일어나고 이를 어떻게 제어하는지 설명합니다.

시각적 서식 모델

시각적 서식 모델을 설명합니다.