CSS 박스 모델 시각화

실제 CSS 픽셀로 표시합니다. 큰 박스는 스크롤하여 확인하세요. 너비와 높이: 1–1,200, 균일한 여백 및 테두리: 0–100 px.

바깥 여백
테두리 두께
안쪽 여백
콘텐츠 크기

사용 방법

너비와 높이는 1–1,200 px, 균일한 바깥 여백, 테두리, 안쪽 여백은 0–100 px로 설정하세요.
콘텐츠 박스 또는 테두리 박스를 선택하고 각 층과 계산 크기를 확인하세요.
CSS를 복사하거나 초기화하세요. 빈칸이나 잘못된 값은 결과를 지우고 복사를 비활성화합니다.

크기 공식

content-box: 콘텐츠=선언 크기, 요소=선언 크기+2×(안쪽 여백+테두리). border-box: 요소=max(선언 크기, 2×(안쪽 여백+테두리)), 콘텐츠=max(0, 선언 크기−2×(안쪽 여백+테두리)). 공통: 외부 크기=요소+2×바깥 여백. 너비와 높이를 각각 계산합니다.

최소 크기와 범위

모든 값은 빈칸 없이 지정 범위의 유한 값이어야 합니다. 테두리 박스의 안쪽 여백과 테두리가 선언 크기를 넘으면 콘텐츠는 0이 되고 요소는 최소 공간을 유지합니다. 바깥 여백은 요소 밖에 있습니다.

그림 배율

계산 픽셀 하나를 CSS 픽셀 하나로 표시하며 창에 맞게 축소하지 않습니다. 스크롤 영역 높이는 360 CSS 픽셀이고 큰 그림은 가로와 세로로 스크롤합니다. 각 층은 명시적 content-box이며 추가 안쪽 여백이나 콘텐츠 최소 크기가 없습니다. 범례가 색을 설명합니다.

자주 묻는 질문

더 알아보기

그림을 창에 맞게 축소하나요?

아니요. 실제 CSS 픽셀로 표시하고 영역을 넘으면 스크롤합니다. 보고 크기는 축소되지 않은 CSS 계산 값입니다.

바깥 여백이 요소 자체를 키우나요?

외부 공간만 늘리며 요소의 실제 크기를 늘리지 않습니다. 균일한 간격만 모델링하며 여백 병합이나 콘텐츠 고유 크기는 다루지 않습니다.