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-boxis present, the length sets the size of the border box; ifcontent-boxis present, it sets the size of the content box; if neither is present, thebox-sizingproperty 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-boxis present, the percentage sets the size of the border box; ifcontent-boxis present, it sets the size of the content box; if neither is present, thebox-sizingproperty 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-contentheight 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-contentheight 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-contentandavailable
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
- 131
- No
- 131
- 132
