The height property in CSS defines the height of an element's content area. This property does not include padding, borders, or margins; it only sets the height of the area within the padding, border, and margin.
auto: This is the default value. The browser calculates the height of the element based on its content. Negative values are not allowed.
height: auto; /* Default value, height is determined by the content */
length: Defines the height using units like px, em, rem, vh, cm, etc. Negative values are not allowed.
height: 100px; /* Fixed height of 100 pixels */
%: Sets the height as a percentage of the containing block’s height. Negative values are not allowed.
height: 50%; /* Height is 50% of the height of the containing element */
initial: Sets the property to its default value.
initial; /* Resets height to its initial value */
inherit: The element inherits the height from its parent element.
height: inherit; /* Inherits height from the parent element */
The width property defines the width of an element's content area. Like height, it does not include padding, borders, or margins, and it sets the width inside these areas.
auto: This is the default value. The width is determined by the browser based on the content and other factors.
width: auto; /* Default value, width is determined by the content */
length: Specifies the width using units like px, em, rem, vw, cm, etc. Negative values are not allowed.
width: 200px; /* Fixed width of 200 pixels */
%: Defines the width as a percentage of the containing block’s width. Negative values are not allowed.
width: 75%; /* Width is 75% of the width of the containing element */
initial: Sets the property to its default value.
width: initial; /* Resets width to its initial value */
inherit: The element inherits the width from its parent element.
width: inherit; /* Inherits width from the parent element */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Height and Width Example</title>
<style>
.fixed-dimensions {
background-color: lightcoral;
height: 150px; /* Fixed height */
width: 300px; /* Fixed width */
padding: 10px;
}
.percentage-dimensions {
background-color: lightgreen;
height: 50%; /* Height as a percentage of the container */
width: 50%; /* Width as a percentage of the container */
padding: 10px;
}
.auto-dimensions {
background-color: lightblue;
height: auto; /* Height is determined by the content */
width: auto; /* Width is determined by the content */
padding: 10px;
}
</style>
</head>
<body>
<div class="fixed-dimensions">
Height: 150px; Width: 300px
</div>
<div class="percentage-dimensions">
Height: 50% of the container's height; Width: 50% of the container's
width
</div>
<div class="auto-dimensions">
Height and Width are auto; determined by the content and container
</div>
</body>
</html>