CSS - Dimension

Dimension

In this tutorial, I will be showing you how to set various dimension properties.

CSS has the following dimension properties: width, height, max-width, min-width, max-height and min-height.

WIDTH

The width property is used to set the width of an element.

HEIGHT

The height property is used to set the height of an element.

MAXIMUM WIDTH

The max-width property is used to set the maximum width of an element. If the maximum width is larger than the browser window or the container; horizontal scrollbar is added automatically.

MINIMUM WIDTH

The min-width property is used to set the minimum width of an element. This property provides a minimum width space even if no content is inside the element.

MAXIMUM HEIGHT

The max-height property is used to set the maximum width of an element. If the maximum height is larger than the browser window or the container; vertical scrollbar is added automatically.

MINIMUM HEIGHT

The min-height property is used to set the minimum width of an element. This property provides a minimum height space even if no content is inside the element.

note
NOTE:

The width, height, max-width, min-width, max-height and min-height takes %, px, initial, inherit and other absolute and relative values.


Further Explanation

max-width - means: shouldn't be greater than. It means the div element will not be bigger (in width) than 200px; but can be smaller than 200px. div ≤ 200px

min-width - means: shouldn't be less than. It means the div element will not be smaller (in width) than 200px; but can be larger than 200px. div ≥ 200px

max-height - means: shouldn't be greater than. It means the div element will not be bigger (in height) than 200px; but can be larger than 200px. div ≤ 200px.

min-height - means: shouldn't be less than. It means the div element will not be bigger (in height) than 200px; but can be smaller than 200px. div ≤ 200px.

tips
TIP:

You can use min and max to set the range of dimension for elements.

ADVERTISEMENTS

LEARNING IS A CONTINOUS PROCESS - PRACTICE MAKES PERFECT