Hello Devs, 

In this tutorial, we will learn CSS height & width

height and width property are always used to set the height and width of an HTML element.


There are many types of value for CSS height and width:

auto: this comes by default. 

length: Specify your height/width in px, cm etc

% - specify in percentage

initial - sets everything to default value

inherit - height and width are inherited from its parent value.


Padding Example

<!DOCTYPE html>
<html>
<head>
<style>
div {
  height: 300px;
  width: 100%;
  background-color: palegreen;
}
</style>
</head>
<body>
 
<h2>Set the height and width of an element</h2>
 
<p>This div element has a height of 300px and a width of 100%:</p>
 
<div></div>
 
</body>
</html>


Example:

<!DOCTYPE html> 
<html> 
   <head> 
      <title>Height and width of image</title> 
      <style> 
         .image { 
         width:300px; 
         height:200px; 
         border:3px solid black; 
         } 
      </style> 
   </head> 
   <body> 
      <h3>Set the width and height of an Image</h3> 
      <img class="image" src="4.jpg"> 
   </body> 
</html>


Max-width Property

<!DOCTYPE html> 
<html> 
   <head> 
      <title>max-width of element</title> 
      <style> 
         .container { 
         max-width:400px; 
         border:2px solid black; 
         } 
      </style> 
   </head> 
   <body> 
      <div class="container"> 
      <h3>Students Tutorial</h3> 
      <p>The max-width can be defined 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).
      </p>
	  </div>
   </body> 
</html>

May this example help you.