LAST UPDATED: APRIL 21, 2021
CSS Dimensions
The CSS dimensions are used to set the height and width of the HTML elements. We can set the height and width of the HTML element with the help of the CSS height and width property.
The CSS offers several properties for setting the dimension of the elements, which are given below:
| Properties |
Description |
height |
The height property sets the height of the HTML element. |
width |
The width property sets the width of the HTML element. |
line-height |
The line-height property sets the height of a line of a text. |
max-height |
The max-height property sets the maximum height that an element can be. |
min-height |
The min-height property sets the minimum height that an element can be. |
max-width |
The max-width property sets the maximum width of an element. |
min-width |
The min-width property sets the minimum width of an element. |
CSS Height and Width Values
The CSS height and width property consist of the following values:
| Value |
Description |
auto |
This is the default value of both properties. |
length |
The user can set the height and width of the box in px, cm, etc. |
% |
The user can set the value of the height and width in % according to their containing block |
initial |
This value sets the value of the height and width to its default value. |
inherit |
This value inherits the value of height and width property from its parent element. |
Example: Specifying height and width of the HTML element in %.
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 200px;
width: 100%;
background-color:#89eff5;
text-align: center;
font-size: 30px;
}
</style>
</head>
<body>
<div>Hello!</div>
</body>
</html>
Output:
As we can see in the output image, the box is taking only the amount of height and width that is specified by the CSS height and width property.
Max-Width of a box in CSS
The max-width property is used to set the max-width of any element. The values of this property can be specified in length, cm, px, %, etc. This property is used to overcome the problem that occurs when the user resizes the screen which is smaller than the element's height and width then the browser adds the side scroll bar to the web page. So, this property improves the handling of the elements when the user switches to the smaller window.
Live Example: Specifying max-width of an HTML element
In this example, we have set the max-width of the element 500px. When we resize the screen to the smaller one, no side scroll bar will be displayed.
Conclusion
In this lesson we have learned about the various values of the CSS height and width property. Also we have learned how to set max-height and max-width of an HTML elements.
