CSS 상자 크기 속성
예시
요소의 전체 너비와 높이에 패딩과 테두리를 포함합니다.
#example1 {
box-sizing: border-box;
}
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
속성은 요소의 너비와 높이가 계산 되는 box-sizing
방식을 정의합니다. 패딩과 테두리가 포함되어야 하는지 여부입니다.
기본값: | 콘텐츠 상자 |
---|---|
상속: | 아니요 |
애니메이션 가능: | 아니요. 애니메이션 가능 에 대해 읽기 |
버전: | CSS3 |
자바스크립트 구문: | 개체 .style.boxSizing="테두리 상자" |
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
-webkit- 또는 -moz- 뒤에 오는 숫자는 접두사와 함께 작동한 첫 번째 버전을 지정합니다.
Property | |||||
---|---|---|---|---|---|
box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.2 -webkit- |
9.5 |
CSS 구문
box-sizing: content-box|border-box|initial|inherit;
속성 값
Value | Description |
---|---|
content-box | Default. The width and height properties (and min/max properties) includes only the content. Border and padding are not included |
border-box | The width and height properties (and min/max properties) includes content, padding and border |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
더 많은 예
예시
두 개의 테두리가 있는 상자를 나란히 지정합니다.
div
{
box-sizing: border-box;
width: 50%;
border: 5px solid red;
float: left;
}
예시
"범용 상자 크기 조정"을 설정합니다.
* {
box-sizing: border-box;
}
관련 페이지
CSS 튜토리얼: CSS 상자 크기 조정
HTML DOM 참조: boxSizing 속성