The height
property is used to set the height of the content box of an element.
Every element on a web page is rectangular, and each element has a rectangular box model, which describes each of the rectangular boxes (areas) generated for the element: the content box, the padding box, the border box, and the margin box. The content box exists for every element. The padding, border, and margin boxes, on the other hand, are optional, and their existence depends on whether you apply a padding, border, or margin to an element.
Any padding
added to the element will increase the total computed height of the element, so you may not always end up with the expected height using just the height
property if you also add padding
to your element. An element with height: 300px
and padding:20px
will render to a height of 340px. See the notes section below for details.
The height
property has no effect on non-replaced inline elements, such as <span>
s. The content height of a non-replaced inline element’s boxes is that of the rendered content within them. In order to set a height on an inline element, the element must be forced to block using the display
CSS property. For example, setting display: inline-block
or display: block
on an inline element allows you to define a height on that element.
The height
property can take either length values or percentage values, in addition to the auto
and inherit
values.
In CSS3, more values have been added to the height
property that are still experimental at this time. See the values section below for details.
The height
property is overridden by the min-height and max-height properties.
Trivia & Notes
In a lot of cases, you may want to set the height of an element to a certain value, and then add some padding to that element and expect it to preserve the height that you set on it using the height
property. In the normal (default) case, this does not work because, as mentioned earlier, the height
property is used to set the height of the content box of the element. Any padding added to the element will add to its final computed height.
In order to avoid that, and preserve the element’s height after adding any amount of padding to it, the box-sizing
property can be used with a value of border-box
.
When box-sizing: border-box
is set on an element, the height specified using the height
property will also include any padding added to it. This means that the height of the padding box specified using the padding
property will be deducted from the height of the element, which in turn means that the content height of the element would be less than the value specified using height
. For example:
.element { box-sizing: border-box; height: 300px; padding: 20px; }
The height of the content area of the element will be 300px – 40px = 260px. (The top and bottom padding areas are 20px each, so the vertical padding sums up to 40px.)
The height specified using the height
property when box-sizing: border-box
is used is the height of the border box. You can read more about this in the box-sizing
property entry and in * { Box-sizing: Border-box } FTW by Paul Irish.
Official Syntax
-
Syntax:
height: <length> | <percentage> | auto | inherit
- Initial: auto
- Applies To: all elements but non-replaced inline elements, table rows, and row groups
- Animatable: yes, as a length
Notes
The new syntax introduced in CSS3 is:
height: [<a href="http://tympanus.net/codrops/css_reference/length"><length></a> | <a href="http://tympanus.net/codrops/css_reference/percentage"><percentage></a>] && [border-box | content-box]? | available | min-content | max-content | fit-content | auto
The keywords border-box
and content-box
can be used in conjunction with length and percentage values in the same declaration.
The keywords available
, min-content
, max-content
and fit-content
are used on their own and each will generate a width based on certain calculations (see values section below).
Values
- <length>
-
Specifies the height of an element using a length unit. See the <length> property entry for a list of possible values.
If the keyword
border-box
is present, the length sets the size of the border box; ifcontent-box
is present, it sets the size of the content box; if neither is present, thebox-sizing
property determines which size is set. - <percentage>
-
Specifies the height of an element as a percentage of the height of the element’s container. See the <percentage> property entry for a list of possible values.
If the keyword
border-box
is present, the percentage sets the size of the border box; ifcontent-box
is present, it sets the size of the content box; if neither is present, thebox-sizing
property determines which size is set.Note that for absolutely positioned elements whose containing block is based on a block container element, the percentage is calculated with respect to the height of the padding box of that element and not the height of the content box of that element.
- auto
-
The browser will calculate and select a height for the element.
Note that the height of the containing block of an absolutely positioned element is independent of the size of the element itself, and thus a percentage height on such an element can always be resolved. However, it may be that the height is not known until elements that come later in the document have been processed.
- inherit
- The element inherits its height from its parent.
- available
- Height is equal to the containing block height minus the current element’s margin, border, and padding.
- max-content
-
The intrinsic preferred height. The
max-content
height is, roughly, the height the content would have if no “soft” line breaks were inserted, i.e., if each paragaph is one long line. - min-content
-
The intrinsic minimum height. The
min-content
height is, roughly, the tallest the box can get by breaking all lines at all possible break points. - fit-content
-
The larger of:
min-content
- the smaller of the
max-content
andavailable
The following experimental keyword values have been introduced in CSS3.
The following image helps understand the min-content
and max-content
values.
Notes
Available
, max-content
, min-content
and fit-content
only have effect in the inline progression direction: they are equivalent to auto
when set on the height
of horizontal elements (horizontal languages like English, Arabic, Spanish, etc.) or on the width of vertical elements (vertically-written languages like Japanese and Chinese). So, these values will have no apparent effect on horizontally-written content, which is why no demos are included for them. To understand them better in the contect of horizontal langauges, please see the width entry for examples and live demos.
Negative height values are not allowed.
The keyword values (in contrast to length and percentage values) are not influenced by the box-sizing property, they always set the size of the content box.
Examples
height: 35%; height: 400px; height: auto; height: inherit;
The total height of the following element will be 450px.
.element { height: 400px; padding: 20px 25px; }
The total height of the following element will be 400px.
.element { box-sizing: border-box; height: 400px; padding: 20px 25px; }
Live Demo
View this demo on the Codrops PlaygroundBrowser Support
The height
property is supported in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.
The new experimental values added in CSS3 are not yet supported in all browsers, and some of them have different equivalents supproted in some browsers. The browser support for the new values is shown in the following table:
Intrinsic & Extrinsic Sizing
Allows for the heights and widths to be specified in intrinsic values using the `max-content`, `min-content`, `fit-content` and `stretch` (formerly `fill`) properties.
W3C Working Draft
Supported from the following versions:
Desktop
- 94
- 66
- No
- 95
- 16
Mobile / Tablet
- 16
- 129
- No
- 129
- 130