Height, inline-size and block-size.

Syntax diagram of height.

In the diagrams, the bold terms are the predefined words of CSS, the other terms are described below:

• length is a numeric value followed by one of the CSS dimension units.
• % is a percentage calculated relative to the width of the parent element.

Description of the height property.

As one might expect, the property height defines the height of the element.

This property is referred to as 'physical' because it always affects the height of the element regardless of the text writing mode. The writing mode depends on the language: languages like CJK, for example, are written from top to bottom.

Calculation method for dimensions.

Warning! The property box-sizing changes the way the dimensions of an element are calculated:

The property height defines the height of the element's content (excluding padding).

The property height defines the height of the element's border (including the border thickness and padding).

Also see the properties min-height and max-height which can impose constraints on the height of the element. And also the property width to define the width.

Language support.

If it is necessary to integrate non-Latin languages, with a different writing mode (top to bottom for example), two so-called logical properties have been defined:

• inline-size: dimension of the element in the writing direction of the lines. For Latin languages, this property is equivalent to width.
• block-size: dimension of the element in the direction of the blocks. For Latin languages, this property is equivalent to height.

If you would like more explanations on managing writing modes according to the language, please refer to the tutorial regarding the writing modes.

Values for height.

The values described below apply both to the property height and to the corresponding logical property: inline-size or block-size.

• height: auto;

  The browser automatically determines the height of the element; generally, the height is determined so that the content is fully visible.

  The auto value sizes the height of the green element so that all the text is visible..
• height: 200px;

  The height of the element is set to the specified dimension. It is a positive number or equal to 0, followed by a unit of dimension (see the CSS dimension units). The content may therefore overflow the element if the height is set to an insufficient value. See the property overflow to hide the overflow, or to display a scroll bar.

  The height of the green element is set to an insufficient value: the content may overflow.

  If the value is expressed in percentages, the logic is more complicated and depends on how the height of the parent element is defined:

  • The height of the parent element is fixed. In this case, the percentage is calculated relative to the height of the parent.
  • The height of the parent element is not fixed (value auto for example). In this case, the percentage used to set the height of the child element is not calculated: the height is set to auto. This was designed to prevent an unsolvable calculation: indeed, if the parent has a height that depends on the content (e.g., auto), we end up with an unsolvable circular calculation: the height of the parent depends on the height of the content and the latter depends on the height of the parent.
  The height of the parent (blue) is not set.
  The height of the green element (50%) is set to auto.

  The height of the parent is set to 150 pixels.
  The height of the child element is indeed 50%.
• height: min-content; height: max-content; height: fit-content; height: fit-content(d);

  These values are interesting for text written vertically, as in CJK languages for example. They calculate a height based on the content and available space.

  For a more precise description of these values, refer to min-content, max-content, fit-content, fit-content().

• height: initial; (auto) height: inherit; height: revert; height: revertLayer; height: unset;

  These values ​​are described in more detail on their respective page: initial, inherit, revert, revert-layer, unset.

Animation of the height property.

The property is often animated for various visual effects, such as rolling out a menu.

Manipulating the height property programmatically.

The code examples below are given with the property block-size but will be easily transposable to the logical property.

Change the height of an element with Javascript.

Two syntaxes are possible. The first accesses the styles through the style[] array. The second uses a notation more common in object-oriented languages.

let el = document.getElementById('id'); el.style['height'] = '5cm'; // or let el = document.getElementById('id'); el.style.height = '5cm';

Getting the height of an element with Javascript.

The code below works if the property has been set, either with the code above or directly on the element itself via its style attribute (and not by using a CSS selector).

let el = document.getElementById('id'); let value = el.style['height']; // or let el = document.getElementById('id'); let value = el.style.height;

Retrieving the computed value of height.

The computed value is that which results from the evaluation of the relative units and any potential inheritance from the cascade. If not, the computed value will be the initial value of the property, which is auto in the case of block-size.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('height');

Changing the height of an element with jQuery.


$('#id').css('height', '5cm');


Retrieving the computed value of height using JQuery.

let value = $('#id').css('height');

Test yourself.

The buttons below apply the entered value to the property block-size and then display either the value as it was applied or the computed value. This second option allows us to see how the value of height is serialized. It is particularly noted that all units are converted to pixels.

Simulator.

The simulator below allows you to differentiate between physical properties, such as height, and logical properties like block-size that adapt to the writing mode depending on the languages.

Browsers compatibility with height.

All these properties are properly supported by all current browsers. However, Internet Explorer does not handle logical properties (which take writing direction into account) but IE is no longer in use.

1

height
property

2

block-size
property

3

inline-size
property

Estimated overall support.

96%

95%

95%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Safari

Safari sur IOS

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Caniuse

Historic of the height property.

• Cascading Style Sheets specification - Version 1

  First definition of the height property.
  The height of an element is defined as the height of the content, excluding padding and border thickness.
  

  November 17, 1995

  Working Draft.

  

  November 12, 1996

  Proposed for recommendation.

  

  December 17, 1996

  Recommendation .

  

  September 13, 2018

  Old specification, declared obsolete.

• Cascading Style Sheets Level 2 - Revision 1 Specification

  Adding the inherit value for the height property.
  Introduced the box-sizing property which changes the method of calculating the dimensions of an element.
  

  November 04, 1997

  Working Draft.

  

  March 24, 1998

  Proposed for recommendation.

  

  May 11, 1998

  Recommendation .

• CSS Logical Properties and Values Level 1

  Introduction of two logical properties to define the dimensions of an element contextually in relation to the writing mode of the language used: inline-size and block-size.
  

  May 18, 2017

  Working Draft.

  

  

  

• CSS Box Sizing Module Level 3

  The height property accepts values defining a dimension relative to the content: min-content, max-content, etc.
  

  September 27, 2012

  Working Draft.

  

  

  

• CSS Box Sizing Module Level 4

  No change to the height property.
  

  May 26, 2020

  Working Draft.

  

  

  

See also, regarding the dimension of the elements.

The properties height, inline-size and block-size are described in the module CSS Box Sizing Module. Many other definitions manage the dimensions of an element.

Properties:

aspect-ratio

Sets the ratio of the width to the height of the element.

block-size

Defines the dimension of an element following the direction of the blocks.

box-sizing

Defines how block dimensions are calculated: whether or not to include borders and padding.

contain-intrinsic-block-size

Sets the dimension of the element in the direction of the blocks, when the element is confined.

contain-intrinsic-height

Sets the intrinsic height of the element when it is confined.

contain-intrinsic-inline-size

Sets the dimension of the element in the direction of the lines, when the element is confined.

contain-intrinsic-size

Sets the dimensions of the element (blocks and rows) when the element is confined.

contain-intrinsic-width

Sets the intrinsic width of the element when it is confined.

inline-size

Sets the dimension of the element in the direction of the lines.

max-height

Sets a limit for the maximum height of the element.

max-width

Sets the maximum width of the element.

min-height

Sets the minimum height of the element.

min-width

Sets the minimum width of the element.

width

Sets the width of the element.

Functions:

Values: