Height and Width in CSS

CSS | Height and Width properties: Here, we are going to learn about the height and width properties in CSS.
Submitted by Anjali Singh, on October 14, 2019

The height and width properties allow you to set the height and width properties of an element.

Height and width properties are crucial for any website because it helps in making the websites more space-efficient and further adds more to the styles of the site as well.

The height and width properties do not include any padding, margins or borders instead they influence the padding, margins, and borders of the element.

Syntax:

    Element{
        height: 200px/60%
        width: 200px/70%
    }

Example:

<!DOCTYPE html>
<title>heading</title>
<style>
    div {
        height: 200px;
        width: 60%;
        background-color: lightblue;
    }
</style>
<div>
    The div has height and weight property.
</div>

Output

The div has height and weight property.

The height and width may have the following set of values:

auto - This is a default value. The browser itself calculates the height and width
length -It helps in defining the height/width in px, cm, etc
% - It helps in defining the height/width in percent of the containing block
initial - This sets the height/width to its default value
inherit - The height and width will be inherited from its parent value

Setting the max-width and max-height:

The max-width and max-height properties are used to set the maximum width and height of an element.

The properties can be specified into px, cm or percent.

Using max-width and max-height the browser with small windows can be handled more neatly.

Example:

<!DOCTYPE html>
<title>heading</title>
<style>
    div {
        max-height: 100px;
        max-width: 95px;
        background-color: green;
    }
</style>
<div>
    The div has 'max-height' and 'max-width' applied.
</div>

Output:

The div has 'max-height' and 'max-width' applied.

Setting the min-width and min-height

It helps in constraining the width and height of an element to a minimum value.

Example:

<!DOCTYPE html>
<title>heading</title>
<style>
    div {
        min-height: 390px;
        min-width: 95px;
        background-color: red;
    }
</style>
<div>
    The div has 'min-height' and 'min-width' applied.
</div>

Output

The div has 'min-height' and 'min-width' applied.

Some CSS dimension properties

Property	Description
height	Sets the height of an element
min-height	Sets the minimum height of an element
max-height	Sets the maximum height of an element
width	Sets the width of an element
max-width	Sets the maximum width of an element
min-width	Sets the minimum width of an element

CSS Tutorial & Examples »

Measurement Units in CSS

Padding in CSS

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples