Height and Width in CSS

❮ Prev Next ❯

CSS property height and width are used to set the height and width of the element. The height and width of the element can be set in various ways. The height and width can be set in pixels, percentage, em, rem, vw, vh, etc.

The padding defined is set inside the element with already set height and width.

This container has width = 50% and height = 150px.

CSS height and width values

Values	Description
auto	By default, the height, and width of the element is set to auto. The height and width of the element are set according to the content of the element.
inherit	The height and width are inherited by the parent element.
initial	The height and width are set to the default value.
length	The height and width are set to the specified length. The length can be in pixels, em, rem, etc.
% (percentage)	The height and width are set to the specified percentage of the parent element.

CSS height property

The height property in CSS is used to set the height of the element.

Example

.box-1 {
    height: 100px;
}

.box-2 {
    height: 200px;
}

Try it

CSS min-height

Sometimes we need to set the minimum height of any HTML element or container. CSS min-height property is used to set the minimum height of the container.

The min-height value can be given in percentage, pixel, vh, etc.

If the content of the container is less than the minimum height, then the height of the container will be set to the minimum height.

Note: when min-height is more than window size then a scroll bar will be created.

Example

.box {
    min-height: 600px;
}

Try it

CSS max-height

CSS max-height property is used to set the maximum height of the HTML element or container.

After the maximum limit has been crossed CSS properties like background-color are not effective on overflown content on screen.

If the content of the container is more than the maximum height, then the height of the container will be set to the maximum height.

Example

.box {
    max-height: 80px;
}

Try it

CSS width property

The width property in CSS is used to set the width of the element.

Example

.box-1 {
    width: 100px;
}

.box-2 {
    width: 200px;
}

Try it

CSS min-width

CSS min-width property is used to set the minimum width of any element or container.

If the content of the container is less than the minimum width, then the width of the container will be set to the minimum width.

Note: when min-width is more than window size then a scroll bar will be created.

Example

.box {
    min-width: 60px;
}

Try it

CSS max-width

CSS max-width property is used to set the maximum width of the HTML element or container.

If the content of the container is more than the maximum width, then the width of the container will be set to the maximum width.

To set max-width you can use px, percentage, vh, etc.

Example

.box {
    max-width: 50%;
}

Try it

❮ Prev Next ❯