width CSS 속성은 요소의 너비를 설정합니다. 기본값은 콘텐츠 영역의 너비이지만, box-sizingborder-box라면 테두리 영역의 너비를 설정합니다.

min-widthmax-width 속성은 width를 덮어씁니다.

구문

/* <length> */
width: 300px;
width: 25em;

/* <percentage> */
width: 75%;

/* 키워드 */
width: 25em border-box;
width: 75% content-box;
width: max-content;
width: min-content;
width: available;
width: fit-content;
width: auto;

/* 전역 값 */
width: inherit;
width: initial;
width: unset;

width 속성은 다음과 같이 지정합니다.

<length>
너비의 절대값.
<percentage>
컨테이닝 블록 너비의 백분율. 컨테이닝 블록이 요소 너비에 영향을 받는 경우의 결과 레이아웃은 정해지지 않습니다.
border-box
앞선 <length> 또는 <percentage>가 요소의 보더 박스에 적용.
content-box
앞선 <length> 또는 <percentage>가 요소의 콘텐츠 박스에 적용.
auto
브라우저가 요소의 너비를 계산하고 선택.
fill
글쓰기 방향에 따라 fill-available 인라인 크기 또는 fill-available 블록 크기를 사용.
max-content
본질적인 선호 너비.
min-content
본질적인 최소 너비.
available
컨테이닝 블록 너비에서 수평 여백, 테두리, 패딩을 제외한 값.
fit-content
다음 중 더 큰 값.
  • 본질적인 최소 너비
  • 본질적인 선호 너비와 사용 가능한 너비 중 작은 값

형식 구문

[ <length> | <percentage> ] && [ border-box | content-box ]? | available | min-content | max-content | fit-content | auto

예제

기본 너비

p.goldie {
  background: gold;
}
<p class="goldie">모질라 커뮤니티는 많은 수의 대단한 소프트웨어를 제작합니다.</p>

px과 em

.px_length {
  width: 200px;
  background-color: red;
  color: white;
  border: 1px solid black;
}

.em_length {
  width: 20em;
  background-color: white;
  color: red;
  border: 1px solid black;
}
<div class="px_length">픽셀 너비</div>
<div class="em_length">em 너비</div>

백분율

.percent {
  width: 20%;
  background-color: silver;
  border: 1px solid red;
}
<div class="percent">백분율 너비</div>

max-content

p.maxgreen {
  background: lightgreen;
  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
}
<p class="maxgreen">모질라 커뮤니티는 많은 수의 대단한 소프트웨어를 제작합니다.</p>

min-content

p.minblue {
  background: lightblue;
  width: -moz-min-content;    /* Firefox */
  width: -webkit-min-content; /* Chrome */
}
<p class="minblue">모질라 커뮤니티는 많은 수의 대단한 소프트웨어를 제작합니다.</p>

접근성 고려사항

페이지를 확대하거나 글꼴 크기를 늘렸을 때 width 속성을 지정한 요소가 잘리거나 다른 내용을 가리지 않도록 확인하세요.

명세

Specification Status Comment
CSS Basic Box Model
The definition of 'width' in that specification.
Working Draft Added the max-content, min-content, available, fit-content, border-box, content-box keywords.
CSS Transitions
The definition of 'width' in that specification.
Working Draft Lists width as animatable.
CSS Level 2 (Revision 1)
The definition of 'width' in that specification.
Recommendation Precises on which element it applies to.
CSS Level 1
The definition of 'width' in that specification.
Recommendation Initial definition.
CSS Intrinsic & Extrinsic Sizing Module Level 3
The definition of 'width' in that specification.
Working Draft Adds new sizing keywords for width and height.
초기값auto
적용대상all elements but non-replaced inline elements, table rows, and row groups
상속no
Percentagesrefer to the width of the containing block
Mediavisual
Computed valuea percentage or auto or the absolute length
Animation typea length, percentage or calc();
Canonical orderthe length or percentage before the keyword, if both are present

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support YesEdge Full support 12Firefox Full support 1IE Full support 4Opera Full support 3.5Safari Full support 1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
Animatable
Experimental
Chrome ? Edge ? Firefox Full support 16IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Full support 16Opera Android ? Safari iOS ? Samsung Internet Android ?
max-content
Experimental
Chrome Full support 46
Full support 46
Full support 22
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge No support NoFirefox Full support 3
Prefixed
Full support 3
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
IE ? Opera Full support 15
Prefixed
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari Full support 6.1
Prefixed
Full support 6.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 2
Alternate Name
Alternate Name Uses the non-standard name: intrinsic
WebView Android Full support 46Chrome Android Full support 46Edge Mobile No support NoFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Full support 5.0
min-content
Experimental
Chrome Full support 46
Full support 46
Full support 22
Alternate Name
Alternate Name Uses the non-standard name: min-intrinsic
Edge No support NoFirefox Full support 3
Prefixed
Full support 3
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
IE ? Opera Full support 15
Prefixed
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari Full support 6.1
Prefixed
Full support 6.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 2
Alternate Name
Alternate Name Uses the non-standard name: min-intrinsic
WebView Android Full support 46Chrome Android Full support 46Edge Mobile No support NoFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Full support 5.0
stretch
Experimental
Chrome Full support 22
Alternate Name
Full support 22
Alternate Name
Alternate Name Uses the non-standard name: -webkit-fill-available
Edge No support NoFirefox Full support 3
Alternate Name
Full support 3
Alternate Name
Alternate Name Uses the non-standard name: -moz-available
IE ? Opera ? Safari Full support 6.1
Prefixed
Full support 6.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support 37
Alternate Name
Full support 37
Alternate Name
Alternate Name Uses the non-standard name: -webkit-fill-available
Chrome Android Full support 25
Alternate Name
Full support 25
Alternate Name
Alternate Name Uses the non-standard name: -webkit-fill-available
Edge Mobile No support NoFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Full support 5.0
fit-content
Experimental
Chrome Full support 46
Full support 46
Full support 22
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge No support NoFirefox Full support 3
Prefixed
Full support 3
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
IE No support NoOpera Full support 15
Prefixed
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari Full support 6.1
Alternate Name
Full support 6.1
Alternate Name
Alternate Name Uses the non-standard name: -webkit-fill-available
WebView Android Full support 46Chrome Android Full support 46Edge Mobile No support NoFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Full support 5.0
Alternate Name
Full support 5.0
Alternate Name
Alternate Name Uses the non-standard name: -webkit-fill-available
content-box
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android ? Chrome Android ? Edge Mobile No support NoFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android No support No
border-box
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android ? Chrome Android ? Edge Mobile No support NoFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android No support No
fill
ExperimentalNon-standard
Chrome Full support 46Edge No support NoFirefox ? IE ? Opera ? Safari ? WebView Android Full support 46Chrome Android Full support 46Edge Mobile No support NoFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Full support 5.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Uses a non-standard name.
Uses a non-standard name.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

같이 보기

문서 태그 및 공헌자

이 페이지의 공헌자: urty5656
최종 변경자: urty5656,