height#

#Introduction

The height CSS property specifies the height of an element. By default, the property defines the height of the border area. If box-sizing is set to content-box, however, it instead determines the height of the content area.

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

#Examples

css-apisrc/height/App.tsx

Code

Preview

#Syntax

/* <length> values */
height: 300px;
height: 25em;

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

/* Keyword values */
height: max-content;
height: fit-content;
height: fit-content(20em);
height: auto;

#Values

• auto

  Default value. lynx will calculate and select a height for the specified element.

• <length>

  <length> defines the height as a distance value.

• <percentage>

  Defines the height as a percentage of the containing block's height.

• max-content

  The intrinsic preferred height.

• fit-content

  fit-content uses the computed size with the available space replaced by the specified argument.

#Formal definition

#Formal syntax

height =
  auto                                      |
  <length-percentage [0,∞]>                 |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )

<length-percentage> =
  <length>      |
  <percentage>

#Difference with the web

• By default, the property defines the height of the border area, while Web is content area.
• min-content is not supported.

#Compatibility