tutorialstonight logo
A Platform To Learn To Code

CSS HEIGHT AND WIDTH



CSS have property height and width which is used to set respectively height and width of the HTML element.

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

This element has 50% width and 150px height.

CSS height/width values


Values Description
auto Browser automatically calculate the height/width.This is default.
inherit The height/width is inherited by parent element.
length It set height/width in px,pt,cm etc.
initial It set height/width to its default value.
% It set height/width using percentage of container they are inside.

Example

Run the code

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.

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


Example

Run the code

CSS min-width

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

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

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


Example

Run the code

CSS max-height

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

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

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

Example

Run the code

CSS max-width

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

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

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

Example

Run the code




BOX

BOX