CSS width Property
The CSS width property sets the width of an element. This width does not include padding, border or margin.
The width property applies to all elements except non-replaced or inline elements, table rows and row groups (i.e. <thead>, <tfoot> and <tbody>).
The property takes a CSS length (px, pt, em, and so on), a percentage, or the keyword auto.
The width property can be overridden by the properties of min-width and max-width.
Negative length values are illegal.
Many values of the width property added in the CSS3 specification are still experimental.
| Initial Value | auto |
| Applies to | All elements. |
| Inherited | No. |
| Animatable | Yes. The width of an element is animatable. |
| Version | CSS1 |
| DOM Syntax | Object.style.width = "300px"; |
Syntax
width: auto | lenght | initial | inherit;Example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 50%;
background-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Width property example</h2>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
</body>
</html>In the given example the width of the text is 50%.
In the following example the width of the first element is 250px and the one of the second element is 25em:
Example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.t1 {
width: 250px;
border: 1px solid black;
background-color: #1c87c9;
}
div.t2 {
width: 25em;
border: 1px solid black;
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Width property example</h2>
<h3>width: 250px</h3>
<div class="t1">
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<h3>width: 25em</h3>
<div class="t2">
Lorem Ipsum is simply dummied text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Values
| Value | Description |
|---|---|
| auto | The browser will calculate a width for the specified element. This is default value. |
| length | Defines width in px, pt, cm, etc. |
| % | Defines width in percent of the containing element. |
| initial | Makes the property use its default value. |
| inherit | Inherits the property from its parents element. |
Browser support
|
|
|
|
|
|
|---|---|---|---|---|
| v | 12.0+ | 1.0+ | 1.0+ | 3.5+ |