We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.


height CSS Property는 element의 content area 높이로 지정됐다. content area는 element의 margin, border, padding 안쪽의 높이이다.

The min-height and max-height properties override height.

min-height와 max-height properties 는 height를 보충한다(override).

적용대상all elements but non-replaced inline elements, table columns, and column groups
PercentagesThe percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto. A percentage height on the root element is relative to the initial containing block.
Computed valuea percentage or auto or the absolute length
Animation typea length, percentage or calc();
Canonical orderthe unique non-ambiguous order defined by the formal grammar


/* Keyword value */
height: auto;

/* <length> values */
height: 120px;
height: 10em;

/* <percentage> value */
height: 75%;

/* Global values */
height: inherit;
height: initial;
height: unset;


사용가능한 단위 참조 <length>
블록의 높이를 포함하는 <percentage>.
존재하는 경우, 앞선 <length> 또는 <percentage>  element들은 border box가 적용된다.
존재하는 경우, 앞선 <length> 또는 <percentage>  element들은 content box가 적용된다.
브라우저가 지정된 element를 선택하고 높이를 계산한다.
fill-available inline size 또는 fill-available block size 에 사용하며, writing mode에 적절하다.
본래 갖고 있던 적절한 높이.
본래 갖고 있던 가장 작은 높이.
수직 margin, border, padding height를 뺀 content block 높이.
다음 중 보다 큰 :
  • 고유 최소 높이(본래 갖고 있던 가장 작은 높이)
  • 고유 최소 높이보다 작지만, 사용 가능한 높이

Formal syntax

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



<div id="red">
  <span>I'm 50 pixels tall.</span>
<div id="green">
  <span>I'm 25 pixels tall.</span>
<div id="parent">
  <div id="child">
    <span>I'm half the height of my parent.</span>


div {
  width: 250px;
  margin-bottom: 5px;
  border: 3px solid #999999;

#red {
  height: 50px;

#green {
  height: 25px;

#parent {
  height: 100px;

#child {
  height: 50%;
  width: 75%;


Specification Status Comment
CSS Basic Box Model
The definition of 'height' in that specification.
Working Draft Added the max-content, min-content, available, fit-content, border-box, content-box keywords.
CSS Transitions
The definition of 'height' in that specification.
Working Draft Lists height as animatable.
CSS Level 2 (Revision 1)
The definition of 'height' in that specification.
Recommendation Adds support for the <length> values and precises on which element it applies to.
CSS Level 1
The definition of 'height' 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.

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) 4.0 7.0 1.0
fill, fit-content, min-content, max-content 46.0        
Feature Android Android Webview Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic support 1.0 (Yes) 1.0 (1) 6.0 6.0 1.0 (Yes)
fill, fit-content, min-content, max-content ? 46.0         46.0

See also

문서 태그 및 공헌자

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