max-width
CSS 속성은 요소의 최대 너비를 설정합니다. max-width
는 width
속성의 사용값이 자신의 값보다 커지는걸 방지합니다.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
max-width
가 width
를 재설정하고, min-height
가 max-width
를 재설정합니다.
구문
/* <length> 값 */
max-width: 3.5em;
/* <percentage> 값 */
max-width: 75%;
/* 키워드 값 */
max-width: none;
max-width: max-content;
max-width: min-content;
max-width: fit-content;
max-width: fill-available;
/* 전역 값 */
max-width: inherit;
max-width: initial;
max-width: unset;
값
<length>
- 고정 길이로 나타낸 최대 너비.
<percentage>
- 컨테이닝 블록 너비에 대한 백분율로 나타낸 최대 너비.
키워드 값
none
- 최대 너비를 정하지 않음.
max-content
- 본질적인 선호 높이.
min-content
- 본질적인 최소 높이.
fill-available
- 컨테이닝 블록의 높이에서 가로축 안쪽 및 바깥 여백과 테두리의 공간을 제외한 높이. (일부 브라우저는 매우 오래 된 이름인
available
로 구현함을 참고하세요.) fit-content
max-content
와 동일.
형식 구문
auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where
<length-percentage> = <length> | <percentage>
예제
다음 예제에서, 자식(child
) 요소의 너비는 150픽셀과 부모(parent
) 요소의 너비 중 더 작은 값이 됩니다.
<div id="parent">
<div id="child">
Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
</div>
</div>
#parent {
background: lightblue;
width: 300px;
}
#child {
background: gold;
width: 100%;
max-width: 150px;
}
fit-content
값을 사용하여 해당 요소의 내용이 필요로 하는 너비만 차지하도록 설정할 수 있습니다.
#parent {
background: lightblue;
width: 300px;
}
#child {
background: gold;
width: 100%;
max-width: -moz-fit-content;
max-width: -webkit-fit-content;
}
접근성 고려사항
페이지의 확대 또는 글씨 크기를 키운 후에도 max-width
를 설정한 요소의 내용이 잘리거나, 다른 요소를 가리지 않도록 주의하세요.
명세
Specification | Status | Comment |
---|---|---|
CSS Box Sizing Module Level 3 The definition of 'max-width' in that specification. |
Working Draft | Adds the max-content , min-content , fit-content , and fill-available keywords. (Both CSS3 Box and CSS3 Writing Modes drafts used to define these keywords, but are superseded by this spec.) |
CSS Transitions The definition of 'max-width' in that specification. |
Working Draft | Defines max-width as animatable. |
CSS Level 2 (Revision 1) The definition of 'max-width' in that specification. |
Recommendation | Initial definition. |
초기값 | none |
---|---|
적용대상 | all elements but non-replaced inline elements, table rows, and row groups |
상속 | no |
Percentages | refer to the width of the containing block |
Computed value | the percentage as specified or the absolute length or none |
Animation type | a length, percentage or calc(); |
브라우저 호환성
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.