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

ValuesDescription
autoBrowser automatically calculate the height/width.This is default.
inheritThe height/width is inherited by parent element.
lengthIt set height/width in px,pt,cm etc.
initialIt set height/width to its default value.
%It set height/width using percentage of container they are inside.
.box{
    height:150px;
    width:70%;
    background-color:rgba(0,101,153,0.44);
}

CSS

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.

.min-height-prop{
    min-height:600px;
    background-color:rgba(0,101,153,0.44);
}

CSS

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.

.min-width-prop{
    min-width:120%;
    background-color:rgba(0,101,153,0.44);
}

CSS

CSS max-height

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.

.max-height-prop{
    max-height: 80px;
    background-color: rgba(0,101,153,0.44);
}

CSS

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.

.max-width-prop{
    max-width: 50%;
    background-color: rgba(0,101,153,0.44);
}

Follow Us On