Style boxSizing 속성

정의와 사용법

boxSizing 속성은 특정 区域에 맞는 특정 요소를 특정 방식으로 정의할 수 있도록 합니다.

예를 들어, 두 개의 테두리가 있는 상자를 나열하고 싶다면, box-sizing을 "border-box"로 설정할 수 있습니다. 이는 브라우저가 지정된 너비와 높이를 가진 상자를 표시하며, 테두리와 내간격을 상자 안에 넣는 것을 의미합니다.

추가 참조:

CSS 참조 매뉴얼:box-sizing 속성

예제

boxSizing 속성 변경:

document.getElementById("myDIV").style.boxSizing = "border-box";

직접 시도해보세요

문법

boxSizing 속성 반환:

object.style.boxSizing

boxSizing 속성 설정:

object.style.boxSizing = "content-box|border-box|initial|inherit"

속성 값

값 설명
content-box

기본 값. 이는 CSS2.1에서 정의된 너비와 높이의 동작입니다.

지정된 너비와 높이(또는 min/max 속성)는 각각 요소의 내용 상자의 너비와 높이에 적용됩니다.

요소의 내간격과 테두리는 지정된 너비와 높이 외에서 레이아웃과 그리기가 됩니다
border-box

요소에 설정된 너비와 높이는 요소의 테두리 상자를 결정합니다.

다시 말해, 요소에 지정된 모든 내간격과 테두리는 설정된 너비와 높이 내에서 그려집니다.

내용의 너비와 높이는 테두리와 내간격을 각각 뺄 수 있습니다.
initial 이 속성을 기본 값으로 설정합니다. 참조하십시오 initial。
inherit 이 속성을 부모 요소에서 상속받습니다. 참조하십시오 inherit。

기술 세부 사항

기본 값: content-box
반환 값: 문자열로 표현된 요소의 box-sizing 속성。
CSS 버전: CSS3

브라우저 지원

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
지원 지원 지원 지원 지원