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%

width: 200px

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

« Previous Next »

CSS Tutorial What is CSS CSS Syntax CSS Selectors How to add CSS CSS Colors CSS Comments CSS Background CSS Border CSS Display property How do I hide an element when printing a web page CSS Float CSS Font CSS Line Height CSS Opacity property CSS Overflow CSS Padding CSS Margin property CSS Position CSS Vertical align CSS White Space CSS Width CSS Word Wrap CSS Outline CSS Visibility CSS Media Queries CSS Animation CSS Gradient CSS Transition CSS Tooltips CSS Tooltip Animation CSS Arrow CSS Flexbox CSS 2D Transforms CSS 3D Transform CSS Aural Media CSS User Interface CSS Pagination CSS Table

No Sidebar ads