tab-size

CSS tab-size 속성은 탭 문자(U+0009)의 너비를 조절합니다.

구문

/* <integer> 값 */
tab-size: 4;
tab-size: 0;

/* <length> 값 */
tab-size: 10px;
tab-size: 2em;

/* 전역 값 */
tab-size: inherit;
tab-size: initial;
tab-size: unset;

<integer>
공백 문자(U+0020)에 대한 탭 문자의 상대적인 너비. 0 이상의 정수여야 합니다.
<length>
탭 문자의 너비. 양의 값이어야 합니다.

형식 정의

초기값8
적용대상block containers
상속yes
Computed valuethe specified integer or an absolute length
Animation typea length

형식 구문

<integer> | <length>

예제

글자 수로 정의

pre {
  tab-size: 4; /* Set tab size to 4 characters wide */
}

탭 제거

pre {
  tab-size: 0; /* Remove indentation */
}

기본 크기와 비교

다음 예제는 기본 탭 크기를 사용자 지정 탭 크기와 비교합니다. white-space 속성을 pre로 설정해서 탭 문자가 접히지 않도록 했습니다.

HTML

<p>no tab</p>
<p>&#0009;default tab size of 8 characters wide</p>
<p class="custom">&#0009;custom tab size of 3 characters wide</p>
<p>&nbsp;&nbsp;&nbsp;3 spaces, equivalent to the custom tab size</p>

CSS

p {
  white-space: pre;
}

.custom {
  tab-size: 3;
  -moz-tab-size: 3;
}

결과

명세

Specification Status Comment
CSS Text Module Level 3
The definition of 'tab-size' in that specification.
Working Draft Initial definition

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
tab-sizeChrome Full support 21
Notes
Full support 21
Notes
Notes This property is not yet animatable.
Edge Full support 79
Notes
Full support 79
Notes
Notes This property is not yet animatable.
Firefox Full support 4
Prefixed Notes
Full support 4
Prefixed Notes
Prefixed Implemented with the vendor prefix: -moz-
Notes See bug 737785 for the status of unprefixing this property.
Notes Before Firefox 53, this property was not animatable.
IE No support NoOpera Full support 15
Full support 15
Full support 10.5
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Safari Full support 6.1WebView Android Full support 4.4Chrome Android Full support 25
Notes
Full support 25
Notes
Notes This property is not yet animatable.
Firefox Android Full support 4
Prefixed Notes
Full support 4
Prefixed Notes
Prefixed Implemented with the vendor prefix: -moz-
Notes See bug 737785 for the status of unprefixing this property.
Notes Before Firefox 53, this property was not animatable.
Opera Android Full support 14
Full support 14
Full support 11
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Safari iOS Full support 7Samsung Internet Android Full support 1.5
Notes
Full support 1.5
Notes
Notes This property is not yet animatable.
<length>Chrome Full support 42Edge Full support 79Firefox Full support 53IE No support NoOpera Full support 29Safari No support NoWebView Android Full support 56Chrome Android Full support 42Firefox Android Full support 53Opera Android Full support 29Safari iOS No support NoSamsung Internet Android Full support 4.0

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

같이 보기