CSS height - height property

 The CSS height property, as the name implies, is a standard property used to control the height of web elements. Web designers often use the CSS height property to adjust the height of the DIV block , the height of the image, the height of the table or the height of the text input field. , These height attributes can be adjusted by numbers and units to determine the final height to be displayed. The CSS height attribute is often used in conjunction with the width attribute for design width . All our commonly used mainstream browsers support the effect of the CSS height attribute. In addition, CSS has also introduced more advanced min-height and max-height attributes to increase the flexibility of the design of the height of web page elements.

CSS height height attribute syntax

height: height parameter value;

The CSS height property can be used only by setting the height parameter value. The commonly used parameter values ​​are organized in the following table:

CSS height height property parameter value

Width value	grammar	Description
auto	height:auto;	Let the browser automatically determine the height of web page elements.
length	height: number + unit;	Acceptable units are px, em, cm and other web standard units.
%	height:number%;	Use percentages to set the height of web page elements, you need a reference for comparison.
inherit	height:inherit;	The height attribute value inherited from the parent layer.

The last inherit attribute value is not supported in IE browser and is not recommended.

CSS height property example 1: adjust the height of the DIV block

<div style="border:1px green solid;">This is the default height without setting the height attribute</div>
<div style="border:1px green solid;height:100px;">This is setting the height attribute Height of 100px</div>

Example output

This is the default height without the height property set

This is to set the height property to a height of 100px

We prepared two DIV blocks with green borders in Example 1. The first DIV block does not use the height attribute, so how much height does the text in the DIV block occupy? The DIV block looks like that height, the second The block uses CSS height to set the height to 100px, which is obviously much higher than the first block.

Reference materials: How to use CSS border and CSS DIV block tags.

Example of CSS height property 2. Adjust the height of table fields

<table border="1">
<tr><td>Default table field height</td></tr>
<tr><td style="height:100px;">The field adjusted by the height attribute Height</td></tr>
</table>

Example output

Default table column height

The height of the field after adjusting the height property

The second example shows a table with two columns (Table). The upper column is the default height, that is, how much height the column content occupies, the height of the column will be displayed, and the lower column is There are fields that can be adjusted through the CSS height property. No matter how much text the table field contains, it will have a height of at least 100px.

Reference material: HTML table

CSS height attribute example 3. Adjust the height of the picture

原始圖片：<img src="upload/20141007145509.png" style="height:auto;"><br><br>
修改圖片：<img src="upload/20141007145509.png" style="height:120px;">

Example output

Original picture: 

Modify picture:

The third example uses the CSS height property to adjust the height of the picture. The first picture uses "height:auto;" to let the browser automatically determine the original height of the picture. The height of the sample picture we used is 80px, and the second picture uses "Height:120px;" forces the height of the picture to be adjusted to 120px, and the width is automatically enlarged in equal proportions, so the output result will feel larger than the original picture because the length and width are enlarged.

Reference: HTML img picture tag