CSS Height and Width

Setting the CSS Height and Width

If you want to define the height and width of an element, then you can use height and width properties.

The width/height properties do not cover margins, padding, or borders.

CSS height and width Values

Here are given below the values of the height and width properties:

  • auto – the browser deliberate the height and width value to apply
  • % – we define a height and width in % of the width of the containing element
  • length – we define height and width  value in px, pt, cm, etc.
  • inherit – specifies that the height and width always inherited from the parent element

CSS height and width Examples

Let’s see the given example to understand how width/height properties works:

Example #1

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.bor-test {
 width: 400px;
 height: 250px;
}
 
</style> 
</head> 
<body> 
<p class="bor-test">This paragraph has a height of 250 pixels and a width of 400 pixels.</p>
 
</body> 
</html>

 

Output

This paragraph has a height of 250 pixels and a width of 400 pixels.

 

Example #2

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.bor-test {
 width: auto;
 height: 150px;
}
 
</style> 
</head> 
<body> 
<p class="bor-test">This paragraph has a height of 150 pixels and a width of auto.</p>
 
</body> 
</html>

 

Output

This paragraph has a height of 250 pixels and a width of auto.

 

Example #3

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.bor-test {
 width: 60%;
 height: 320px;
}
 
</style> 
</head> 
<body> 
<p class="bor-test">This paragraph has a height of 220 pixels and a width of 60%.</p>
 
</body> 
</html>

 

Output

This paragraph has a height of 220 pixels and a width of 60%.

Similar Posts