Definition
The height CSS property is used to set the height of an element. It specifies the vertical size or dimension of the content box of an element, excluding padding, border, and margin.
The height property accepts various length units, such as pixels (px), percentages (%), viewport height (vh), and more. It can also take the value of auto, which allows the element to expand vertically to accommodate its content.
Here’s an example:
.container {
height: 200px;
}
In this example, the .container class is assigned a height of 200px. This means the element will have a fixed height of 200 pixels, regardless of its content.
You can also use relative units, such as percentages, to set the height relative to the containing element or the viewport height:
.container {
height: 50%;
}
In this case, the .container class will have a height that is 50% of its parent element’s height.
The height property is commonly used to control the size and layout of elements in CSS. It plays a crucial role in creating visually appealing and responsive designs.