height

p.test { height: 500px;}
p.test1 { height: auto;}

Value	Description
auto	Automatically calculates the height based on the content. When applied to an img element, the image is displayed at its natural size, or the height is automatically calculated to maintain the aspect ratio based on the width. The initial value of the 'height' property is 'auto'.
number	Specifies a numeric value. The most common units are 'px' and '%'. Negative values are not allowed. When specified with '%', the base size is the height of the containing block.

<div style="height: 100px; background-color: #ff0;">This is a div element with 'height: 100px'.</div>

<div style="height: auto; background-color: #ff0;">This is a div element with 'height: auto'. The height is automatically calculated based on the content.</div>

※ Version data is based on MDN.

Specifies the height of an element.

The 'height' property has no effect on non-replaced inline-level elements. Replaced elements include img, input, object, select, textarea, and button elements — any other element with a 'display' value of 'inline' is a non-replaced element.

<span style="height: 100px; background-color: #ff0;">This is a span element with 'height: 100px', but since span is a non-replaced inline element, the 'height' property has no effect.</span>

<p>The img element below has 'height: 300px'. Since img is a replaced element, the 'height' property applies.</p>
<p><img style="height: 300px;" src="/dics/dictionary-css/img/sample.jpg"></p>

When the unit is '%', the value is relative to the height of the containing block, not including the element's own border and padding.

<div style="height: 300px; border: solid 1px #f00;">
	<div style="height: 100%; background-color: #ff0;">This div is inside a div with 'height: 300px' (red border). With 'height: 100%', this element's height becomes 300px, matching its parent.</div>
</div>

<p>The img element below is inside a div with 'height: 300px', and has 'height: 100%'. It matches the parent div (red border), so the img height becomes 300px.</p>
<div style="height: 300px; border: solid 1px #f00;">
	<img style="height: 100%;" src="/dics/dictionary-css/img/sample.jpg">
</div>

<div style="height: 300px; border: solid 1px #f00;">
	<div style="height: 100%; padding: 50px 0; background-color: #ff0; opacity: 0.7;">This div has 'height: 100%' and 'padding: 50px 0'. Since padding is added to the height, the total becomes 400px, overflowing the parent.</div>
</div>

For non-inline, non-img elements, setting 'height' to 'auto' makes the height automatically determined by the content.

<div style="height: auto; background-color: #ff0;">This is a div element with 'height: auto'. The height adjusts automatically to fit the content.</div>

When 'height: auto' is applied to an img element, the image is displayed at its natural size. If the 'width' property is set to a non-'auto' value, the height is automatically calculated to maintain the aspect ratio.

<p>The img element below loads a 320px wide, 214px tall image with 'height: auto'. The image is displayed at its natural size, so the height is 214px.</p>
<p><img style="height: auto;" src="/dics/dictionary-css/img/sample.jpg"></p>

<p>The img element below has 'height: auto' and 'width: 200px'. When 'height' is 'auto' and 'width' is set to a specific value, the height is automatically calculated to maintain the aspect ratio. The height becomes 134px.</p>
<p><img style="height: auto; width: 200px;" src="/dics/dictionary-css/img/sample.jpg"></p>