Hurry! Try our new Interactive Courses for FREE. 🥳   🚀

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.