CSS height Property

❮ Previous Reference Next ❯

Example

.example2 {
  height: 50px;
  border: 1px solid black;
}





Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Meaning

The height property sets the height of an element’s content region.

Standard positive length units can be used, and pixels (px) is often the assumed measurement in browsers.

Percentage values, based on the height of the containing element, can also be used.

The default value of auto automatically calculates the width of an element, based on the height of the containing element and the size of the content.

Default value:auto
Inherited:No
Animatable:Yes
Version:CSS1
JavaScript syntax:
object.style.height="auto|length|%|max-content|min-content|fit-content|fit-content(length|percentage)|clamp()|initial|inherit|revert|revert-layer|unset";



Standard Syntax

height: auto|length|%|max-content|min-content|fit-content|fit-content(length|percentage)|clamp()|initial|inherit|revert|revert-layer|unset;



Browser Support

The numbers in the table specify the first browser version that fully supports the property.




Status







Property Values

The following table describes the values of this property.

Value Description
auto This is default value. The browser will calculate the height for the specified element on the basis of the values of other properties.
length Specifies the height as a length value in px, pt, cm, em, etc. Negative length values are not allowed.
percentage Specifies the height in percentage. The percentage is calculated with respect to the height of the element's containing block. Negative percentage values are not allowed.
max-content The intrinsic preferred height.
min-content The intrinsic minimum height.
fit-content Box will use the available space, but never more than max-content
fit-content(length|percentage) Uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, length|percentage))
clamp() Enables selecting a middle value within a range of values between a defined minimum and maximum
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element animation-delay property.
revert Reverts the cascaded value of the property from its current value to the value the property
revert-layer Rollback styles to the ones specified in previous cascade layers.
unset Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.



Default CSS Property Values

selectors {
  height: auto;
}
❮ Previous Reference Next ❯