CSS Dimensions

Dimensions in CSS: To specify the height and width of an element you can use height and width properties. It does not specify the borders, margins, and padding, it just sets the height and width inside the border, margins, and padding for an HTML element.

CSS Dimension Properties

PROPERTY DESCRIPTION
height Sets the height of an element
max-height Sets the maximum height of an element
max-width Sets the maximum width of an element
min-height Sets the minimum height of an element
min-width Sets the minimum width of an element
width Sets the width of an element

CSS Height and Width Values

The CSS height and width properties might have the following values

Auto This is the default. The browser calculates the height and width
Length Specify the height and width in px, cm, etc.
% Specify the height and width in percent of the containing block
Initial Provides the height and width to its default value
Inherit The height and width will be inherited from its parent value

CSS Height and Width with <div> Example

The height and width of a <div> element:



<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 250px;
width: 70%;
background-color: #618685;
}
</style>
</head>
<body>
<h2>Set the height and width of an element</h2>
<p>This div element has a height of 250px and a width of 70%:</p>
<div></div>
</body>
</html>

CSS Height and Width with <div> Example Output

CSS Height and Width with <div> Example Output

Setting Max-Width

To set a maximum width for an element the max-width property is used. The max-width can be defined in length values such as cm, px,% for a containing block or none which is a default by the way. With the above <div> problem is if the browser window is small than the width of the element(300px) then the browser should add a scrollbar to the page. The usage of max-width in this kind of situation will make more effect on small windows.

Max-Width Example

This <div> element has a height of 70 pixels and a max-width of 300 pixels:

<!DOCTYPE html>
<html>
<head>
<style>
div {
max-width: 300px;
height: 70px;
background-color:#618685 ;
}
</style>
</head>
<body>
<h2>Set the max-width of an element</h2>
<p>This div element has a height of 70px and a max-width of 300px:</p>
<div></div>
<p>Resize the browser window to see the effect.</p>
</body>
</html>

Max-Width Example Example Output

Max-Width Example Example Output