Prev Next

Height and Width

Height

The height property sets the height of the content area. Note that, it doesn’t change height of the content. See the below given code:

Sample code:

h1{height:5%;background-color:red;text-align:center;}

Min-height:
The min-height property sets the maximum width of an element.

Max-height:
The min-height property allows authors to constrain box heights to a certain range.

<!DOCTYPE html>
<html>
<head>
<style>

div{
   height:50px;
   background-color:red;
   text-align:center;
   }

</style>
</head>
<body>

<div>Learning how the Height works in box model</div>
 
</body>
</html>

Width

The width property sets the width of the content area. Note that, it doesn’t change width of the content. Add width property to above code as below:

Sample code:

h1{width:10%;height:5%;background-color:red;text-align: center;}


Min-width
The min-width CSS property sets the minimum width of an element.

Max-width
The max-width property allows authors of page to constrain content widths to a certain range.

The properties height, min-height, max-height, width, min-width and max-width set the height/width of the area inside padding, border, and margin of the element. It doesn’t include padding, borders, or margins.

<!DOCTYPE html>
<html>
<head>
<style>

div{
   height:50px;
   width :200px;
   background-color:red;
   text-align:center;
   }

</style>
</head>
<body>

<div>Learning how the Height and width works in box model</div>
 
</body>
</html>

What is the difference between Max-width and width?

width keeps the size of the object static. Lets say you put width: 500 px for an image. When you re-size you screen the image size will still be 500 px. If you view it on a mobile phone and its screen width is less then 500 px the image will not fit in the screen. At the same time, when you set max-width:500 px it will re-size up to 500 px but when the screen goes smaller and the images doesn’t fit in the screen it will automatically re-size it to fit the screen.

Leave a Comment