Home >>CSS Tutorial >CSS Width

CSS Width

CSS Width

The CSS Width property explains how to use the CSS Property called width. It sets width of the area inside the border, margin and padding of the element.

CSS width property never include padding, margin or borders, it defines the width of the content area of an element.

CSS width values

Value Description
length It defines the width of an element in cm, px etc.
% It defines the width in % of the containing block.
Auto It is a default value. The width is calculated by the browser.
initial It is used to define or set the property to its default value.
inherit It is used to specify that it can inherit the property from its parent element.

Let's take an Example of CSS width Property:

<!DOCTYPE html>
<html>
<head>
<style>
div.widthA {
  width: auto;
  border: 1px solid black;
  background:#bef7eb;
}
div.widthB {
  width: 50%;
  border: 1px solid black; 
  background:#bef7eb;  
}
div.widthC {
  width: 200px;
  border: 1px solid black;  
    background:#bef7eb;
}
</style>
</head>
<body>
<h2>The width Property</h2>
<div class="widthA">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</div>
<h3>width: 50%</h3>
<div class="widthB">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</div>
<h3>width: 200px</h3>
<div class="widthC">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</div>
</body>
</html>
Output :

The width Property

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.

width: 50%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.

width: 200px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.
<!DOCTYPE html>  
<html>  
<head>  
<style>  
img.normal {  
    width: auto;  
} 
  img.big {  
    width: 175px;  
}  
 </style>  
</head>  
<body>  
<img class="normal" src="../CSS width/1.jpg" width="100" height="90"><br> 
<p>The height and width of this paragraph is 175px.</p> 
<img class="big" src="../CSS width/1.jpg" width="100" height="90">  
</body>  
</html>  
Output :

The height and width of this paragraph is 175px.