CSS HTML Javascript jQuery Ajax PHP Example Java MORE

CSS height & width

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

CSS height and width values

There are several type of value for CSS height and width:

auto - This is by default. The browser calculates the height and width automatically.

length - Specify the height/width in px, cm etc.

% - Specify the height/width in percentage.

initial - Sets the height/width to its default value

inherit - The height/width will be inherited from its parent value.

In the below example we set a height and width for an div element.

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>

Run it yourself

Height and width of Image It is used to set the height and width of an image. It’s value can be in px, cm, percent, … etc.

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>

Run it yourself

Max-width Property

The max-width property is used to set the maximum width of an HTML element. 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).

<!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>

Run it yourself