width 속성의 이해

width 속성은 요소의 너비, 즉 가로 크기를 지정합니다.

이 크기의 기준은 기본적으로 콘텐츠 영역의 너비입니다.
그러나, 요소의 크기를 계산할 때 크기의 기준을 설정하는 box-sizing이 border-box로 설정되어 있다면 테두리 영역까지의 너비가 기준이 됩니다.

CSS 데모: width 데모 버튼을 클릭해 보세요!

형식 구문

CSS 
selector {
    width: <길이> | <퍼센트(%)> | <키워드>
}

구문

CSS 
/* <길이> 단위 값 */
width: 120px;
width: 13rem;
width: 15rem;

/* <퍼센트(%)> 단위 값 */
width: 50%; /*  부모 요소 너비의 50% */
width: 100%; /*  부모 요소 너비의 100% */

/* <키워드> 값 */
width: auto; /* 초깃값 */
width: max-content;
width: min-content;
width: fit-content;

/* 전역 값 */
width: inherit;
width: initial;
width: revert;
width: revert-layer;
width: unset;

값

width 속성은 다양한 형태의 값을 사용할 수 있습니다.
이를 설명과 예제로 정리하면 다음과 같습니다.

<길이> 단위 값

길이 단위의 값은 항상 양수입니다. (음수 값은 유효하지 않습니다.)

상대적 <길이> 단위
  • rem - 루트 요소인 <html> 요소의 font-size를 의미합니다. rem은 root em(element)을 나타냅니다.
  • em - 현재 요소의 font-size를 1em의 기준으로 합니다.

CSS rem과 em 단위 – 올바른 이해와 사용 방법을 참조하세요.

절대적 <길이> 단위
  • px
  • vh
  • vw
  • CSS에서 사용 가능한 길이 단위
예제
HTML 
<p>width 속성은 요소의 너비, 즉 가로 크기를 지정합니다.</p>
CSS 
p {
    width: 100px;
    background-color: gold;
}
실제 적용된 모습

<퍼센트(%)> 단위 값

부모 요소의 너비에 대한 백분율로 정의합니다. (음수 값은 유효하지 않습니다.)

예제
HTML 
<div class="parent">
    <p class="child">부모 요소의 너비에 대한 백분율로 정의합니다.</p>
</div>
CSS 
.parent {
    background-color: silver;
}
.child {
    width: 50%;
    background-color: gold;
}
실제 적용된 모습

auto 값

초깃값입니다.

요소의 너비를 콘텐츠와 컨텍스트에 따라 브라우저가 자동으로 결정합니다. 이때 구현되는 기준이 달라집니다.
다음과 같은 상황에서 다르게 구현됩니다.

플렉스 박스나 그리드 박스의 아이템이 아닌 경우

플렉스 박스는 display 값이 flex나 inline-flex인 요소 컨테이너를 의미하며, 이 컨테이너는 그 안에 포함된 자식 요소(아이템)를 유연하게 배치할 수 있습니다. 마찬가지로, 그리드 박스는 display 값이 grid나 inline-grid인 요소 컨테이너를 의미하며, 이 컨테이너는 그 안의 아이템들을 2차원 그리드 형태로 배치합니다.

이러한 플렉스 박스나 그리드 박스의 아이템이 아닌 경우에는 자신 요소의 display에 따라 구현이 달라집니다.

자신 요소의 display가 block, flex, grid, list-item인 경우

부모 요소의 너비에 꽉 채웁니다. 단, 좌우에 margin이 있으면 그 값을 포함해서 꽉 채웁니다.
예제를 통해 살펴보겠습니다.

HTML 
<div class="parent">
    <p class="child">width의 auto 값 이해하기</p>
</div>
CSS 
.parent {
    display: block; /* 이 값을 지정하지 않아도 div 요소의 display 초깃값은 block이다 */
    background-color: silver;
    border: 5px dashed red;
}
.child {
    display: block; /* 이 값을 지정하지 않아도 p 요소의 display 초깃값은 block이다 */
    width: auto; /* 이 값을 지정하지 않아도 width 초깃값은 auto이다 */
    background-color: gold;
}
실제 적용된 모습
자신 요소의 display가 inline, inline-block, table, inline-flex, inline-grid인 경우

자신 요소의 보여지는 콘텐츠의 너비입니다.
예제를 통해 살펴보겠습니다.

HTML 
<div class="parent">
    <span class="child">width의 auto 값 이해하기</span>
</div>
CSS 
.parent {
    display: block; /* 이 값을 지정하지 않아도 div 요소의 display 초깃값은 block이다 */
    background-color: silver;
    border: 5px dashed red;
}
.child {
    display: inline; /* 이 값을 지정하지 않아도 span 요소의 display 초깃값은 inline이다 */
    width: auto; /* 이 값을 지정하지 않아도 width 초깃값은 auto이다 */
    background-color: gold;
}
실제 적용된 모습
플렉스 박스나 그리드 박스의 아이템인 경우

부모 요소의 display 값이 flex나 inline-flex인 플렉스 박스의 아이템이거나, grid나 inline-grid인 그리드 박스의 아이템인 경우에는 자신 요소의 display 값과는 상관 없이 자신 요소의 보여지는 콘텐츠의 너비입니다. 이때, 자신 요소의 너비는 부모 컨테이너의 레이아웃에 따라 결정되며, 콘텐츠의 너비에 맞게 조정됩니다.
예제를 통해 살펴보겠습니다.

HTML 
<div class="parent">
    <p class="child">width의 auto 값 이해하기</p>
</div>
CSS 
.parent {
    display: flex;
    background-color: silver;
    border: 5px dashed red;
}
.child {
    display: block; /* 이 값을 지정하지 않아도 p 요소의 display 초깃값은 block이다 */
    width: auto; /* 이 값을 지정하지 않아도 width 초깃값은 auto이다 */
    background-color: gold;
}
실제 적용된 모습

max-content 값

width 속성에서 max-content 값은 콘텐츠의 최대 너비에 맞춰 요소의 너비를 설정합니다.
즉, 요소의 너비는 콘텐츠가 온전히 차지할 수 있는 시점의 최대 너비로 설정됩니다.

max-content는 그 콘텐츠가 차지하는 최적의 충분한 너비만큼 요소의 크기를 맞추는 역할을 합니다.
예제를 통해 살펴보겠습니다.

HTML 
<div class="parent">
    <p class="child">width의 max-content</p>
    <p class="child">width의 max-content 값의 이해</p>
    <p class="child">width의 max-content 값은 그 콘텐츠가 차지하는 최적의 충분한 너비만큼 요소의 크기를 맞추는 역할</p>
</div>
CSS 
.parent {
    width: 400px;
    background-color: silver;
    border: 5px dashed red;
}
.child {
    width: max-content;
    background-color: gold;
}
실제 적용된 모습
주의할 점

위 예제에서 적용된 모습을 보면 알 수 있듯이, max-content는 해당 요소의 콘텐츠 길이만을 고려하여 너비를 설정합니다. 부모 요소의 너비나 레이아웃 제약 조건은 고려하지 않습니다.

만약 해당 요소의 max-content 값으로 구현되는 콘텐츠의 너비가 부모 요소의 너비보다 클 경우에는 오버플로(overflow, 경계를 넘어섬)가 발생하여 콘텐츠가 부모 요소의 경계를 넘어설 수 있습니다.

min-content 값

width 속성에서 min-content 값은 요소의 콘텐츠가 차지할 수 있는 최적의 최소 너비에 맞춰 요소의 너비를 설정합니다.

최적의 '최소 너비'란?

요소의 인라인 콘텐츠가 줄바꿈 없이 차지할 수 있는 시점의 가장 작은 너비를 의미합니다.
즉, 텍스트는 가능한 모든 단어를 끊지 않고 한 줄로 최소화된 길이로 설정되며, 이미지나 기타 콘텐츠는 더 작게 줄어들 수 없는 크기로 설정됩니다.

이 값은 부모 요소의 너비나 레이아웃에 영향을 받지 않으며, 콘텐츠 자체만을 기준으로 계산됩니다.

예제를 통해 살펴보겠습니다.

HTML 
<div class="parent">
    <p class="child">width의 min-content</p>
    <p class="child">width의 min-content 값의 이해</p>
    <p class="child">codingeverybody{} 모든 사람을 위한 코딩 학습서입니다.</p>
</div>
CSS 
.parent {
    width: 400px;
    background-color: silver;
    border: 5px dashed red;
}
.child {
    width: min-content;
    background-color: gold;
}
실제 적용된 모습

fit-content 값

width 속성에서 fit-content 값은 부모 요소의 너비나 레이아웃 제약을 고려하여
요소의 너비를 min-content와 max-content 사이의 적합한 값으로 설정합니다.

  • min-content보다 작아질 수 없고,
  • max-content보다 커질 수 없으며,
  • 콘텐츠가 부모 요소의 경계를 넘지 않도록 부모 요소의 너비를 초과하지 않습니다.

예제를 통해 살펴보겠습니다.

HTML 
<div class="parent">
    <p class="child">width의 fit-content</p>
    <p class="child">width의 fit-content 값의 이해</p>
    <p class="child">부모 요소의 너비나 레이아웃 제약을 고려하여 min-content와 max-content 사이의 적합한 값으로 설정합니다.</p>
</div>
CSS 
.parent {
    width: 400px;
    background-color: silver;
    border: 5px dashed red;
}
.child {
    width: fit-content;
    background-color: gold;
}
실제 적용된 모습

min-width와 max-width와의 관계

주의할 점

display가 inline(대체되지 않은 인라인 요소, non-replaced inline elements)일 경우와 table rows, row groups인 요소에서는 width 속성이 적용되지 않습니다.

HTML 
<span>display가 inline</span>
CSS width: 50px;은 적용되지 않습니다. 
span {
    display: inline; /* 이 값을 지정하지 않아도 span 요소의 display 초깃값은 inline이다 */
    width: 50px;
    background-color: gold;
}

width: 50px;은 적용되지 않습니다. 자신 요소의 보여지는 콘텐츠의 너비가 적용됩니다.

실제 적용된 모습

형식 정의

width 속성의 형식 정의
초깃값 auto
적용 요소 display가 inline(대체되지 않은 인라인 요소, non-replaced inline elements)일 경우와 table rows, row groups인 요소를 제외한 모든 요소
상속 아니오
애니메이션 <길이> 단위 값, <퍼센트(%)> 단위 값, calc()로 계산된 값

브라우저 호환성

width 속성의 브라우저 호환성
속성과 값
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
width 1 12 1 1
max-content 46 79 66 11
min-content 46 79 66 11
fit-content 46 79 94 11

명세서

width 속성의 명세서 사양
명세서 사양
width CSS Box Sizing Module Level 4
#width-height-keywords

참고문헌

같이 보기