CSS Dimensions - Width and Height

In this tutorial we will learn about the dimension property (width and height).

width and height

We use the width and height properties to set the dimension of any element.

By default the width and height of the element is set to auto.

The value of width and height can be in length, percentage and auto.

In the following example we have set the width and height of all the div element having class text-container to 100% and 300px.

div.text-container {
	width : 100%;
	height : 300px;
}

min-width and min-height

The min-width and min-height property is used to set the minimum width and height if the element.

It can take value in lenght (like px, mm, etc.), percentage (like 40%) and none (the default value).

When the value is set to none it means there is no min-width and min-height set.

In the following example we have set the min-width and min-height of a div element having class container to 300px and 360px;

div.container {
	min-width : 300px;
	min-height : 360px;
}

max-width and max-height

The max-width and max-height property is used to set the maximum width and height of the element.

Like min-width and min-height, it also takes value in lenght (like px, cm, etc.), percentage (like 80%) and none (the default value).

When the value is set to none it means there is no max-width and max-height set for the element.

In the following example we have set the max-width and max-height of a div element having class container to 300px and 360px;

div.container {
	max-width : 300px;
	max-height : 360px;
}