/    /  CSS Width

CSS Width

 

This property is providing to set the width of the content area of an element.

 

CSS width values:

 

  • auto – it is used to calculate the width.
  • length Width in px, cm etc.
  • % Width of the containing block in %.
  • initial Its default value.
  • inherit Its parent element.

 

Example:

 

<!DOCTYPE html> 
<html> 
<head> 
<style> 
img.normal { 
  width: auto; 
} 
img.big { 
  width: 150px; 
} 
p.ex { 
  height: 150px; 
  width: 150px; 
} 
</style> 
</head> 
<body> 
<img class="normal" src="good-morning.jpg" width="95" height="84"><br> 
<img class="big" src="good-morning.jpg" width="95" height="84"> 
<p class="ex">The height and width of this paragraph is 150px.</p> 
<p>This is a paragraph.</p> 
</body> 
</html>

 

OUTPUT:

 

CSS Width

 

CSS Width Example: width in %:

 

<!DOCTYPE html> 
<html> 
<head> 
<style> 
img.normal { 
  width: auto; 
} 
img.big { 
  width: 50%; 
} 
img.small { 
  width: 10%; 
} 
</style> 
</head> 
<body> 
<img class="normal" src="good-morning.jpg" width="95" height="84"><br> 
<img class="big" src="good-morning.jpg" width="95" height="84"><br> 
<img class="small" src="good-morning.jpg" width="95" height="84"> 
</body> 
</html>

 

OUTPUT:

 

CSS Width