CSS Height Width and Max-width:-

The CSS top and width houses are used to set the peak and width of an element.

The CSS max-width belongings are used to set the maximum width of an element.



<!DOCTYPE html>

<html>

<head>

<style>

p {border: 2px solid red;

width: 100%;

height: 50px;

}

</style>

</head>

<body>

<h1> CSS Height and Width Property </h1>

<p> This paragraph has 100% width and 50px height.</p>

</body>

</html>

Try this code for a better experience 



CSS Setting Height and Width:-

The height and width of residences are used to set the peak and width of an element.

The top and width properties do now not encompass padding, borders, or margins. It unites the peak/width of the region inside the padding, border, and margin of the element.

CSS Height and Width Values:-

The peak and width homes may have the subsequent values:

  • auto - This is the default. The browser calculates the peak and width
  • period - Defines the height/width in px, cm, etc.
  • % - Defines the height/width in percent of the containing block
  • preliminary - Sets the peak/width to its default value
  • inherit - The peak/width might be inherited from its parent fee



<!DOCTYPE html>

<html>

<head>

<style>

p {background-color: skyblue;

width: 50%;

height: 200px;

}

</style>

</head>

<body>

<h1> Height and Width of an element</h1>

<p> This paragraph has 200px height and 50% width. </p>

</body>

</html>

Try this code for a better experience 



<!DOCTYPE html>

<html>

<head>

<style>

p {background-color: skyblue;

width: 500px;

height: 100px;

}

</style>

</head>

<body>

<h1> Height and Width of an element</h1>

<p> This paragraph has 100px height and 500px width. </p>

</body>

</html>

Try this code for a better experience 



Note:- Remember that the peak and width homes no longer include padding, borders, or margins! They set the peak/width of the location within the padding, border, and margin of the element!


The max-width belongings are used to set the most width of a detail.

The max-width can be laid out in duration values, like px, cm, and so on., or in percentage (%) of the containing block, or set to none (this is the default. which means that there is no most width).

The trouble 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 web page.

Using max-width rather, in this situation, will enhance the browser's coping with small home windows.

Tip:- Drag the browser window to smaller than 500px wide, to look at the distinction between the 2 divs!

Note:- If you for a few motives use each of the width assets and the max-width assets on the same detail, and the value of the width property is larger than the max-width assets; the max-width assets will be used (and the width assets can be neglected).



<!DOCTYPE html>

<html>

<head>

<style>

div {background-color: skyblue;

height: 100px;

max-width: 500px;

}

</style>

</head>

<body>

<h1> Max Width of an element </h1>

<div> This paragraph has 100px height and 500px max width </div>

</body>

</html>

Try this code for a better experience