Initial height

height

Specify the element's initial height.

Property values

This value has two different interpretations depending upon the current value of the element's box-sizing property.

box-sizing: content-box The height is the size of the element's content area only
box-sizing: border-box The height is the sum of the element's content area plus the size of its top-padding and bottom-padding plus the thickness of its top-border and bottom-border

Units

Use any of these font-relative typographic units to set the element's height:

em em The font-size of the current font
rem relative em The font-size of the <html> element
lh line height The line-height of the current font
rlh relative line height The line-height of the <html> element
cap cap height The nominal height of the current font's capital letters
ex "x" The height of the current font's "x" glyph

Or use any of these fixed size units which are independent of the current font:

% percent A percentage of the parent element's height
in inch A size equal 96px
px pixels A size equal to 1/96 inch
pt point A size equal 1in/72 = 1.33px
pc pica A size equal 1in/6 = 12pt = 16px
cm centimeter A size equal to 96px/2.54 = 37.8px
mm millimeter A size equal to 96px/25.4 = 3.8px
Q quarter millimeter A size equal to 96px/1016 = 0.94px

Or use these viewport-percentage units which account for different display device capabilities:

vh viewport height 1% of the viewport's height
vw viewport width 1% of the viewport's width
vi viewport inline axis 1% of the viewport's inline axis
vb viewport block axis 1% of the viewport's block axis
vmin viewport minimum Either vh or vw, whichever is smaller
vmax viewport maximum Either vh or vw, whichever is larger

Examples

height: 200px;
height

style > sizing > heightInitial height

🔎