CSS Height and Width

Setting height and width:-

The height and width properties are used to set the height and width of an element. The height and width can be set to auto.

div {
    height: 200px;
    width: 50%;
    background-color: lightpink;}

Note: The height and width properties do not include padding, borders, or margins; they set the height/width of the area inside the padding, border, and margin of the element

Setting max-width:-

The max-width property is used to set the maximum width of an element. The max-width can be specified in length values, like px, cm, etc., or in percent (%) of the containing block, or set to none (this is default. Means that there is no maximum width). The max-width can be specified in length values, like px, cm, etc., or in percent (%) of the containing block, or set to none (this is default. Means that there is no maximum width).The problem with the <div> above occurs when the browser window is smaller than the width of the element (500px). The browser then adds a horizontal scrollbar to the pag.Using max-width instead, in this situation, will improve the browser's handling of small windows.Tip: Drag the browser window to smaller than 500px wide, to see the difference between the two divs!

Note: The value of the max-width property overrides width.

The following example shows a <div> element with a height of 100 pixels and a max-width of 500 pixels:

div {
    max-width: 500px;
    height: 100px;
    background-color: powderblue;}

All CSS Dimension Properties:-

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