CSS width Property
The CSS width property sets the width of an element. The width does not include border, padding or margin. Note that this applies to the default content-box box model; with box-sizing: border-box, padding and border are included in the width calculation.
The width property applies to all elements except non-replaced 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.
Note that the percentage value is based on the width of the parent element (the containing block). For absolutely positioned elements, the percentage is calculated relative to the width of the containing block’s padding box.
The width property can be overridden by the properties of min-width and max-width.
INFO
Negative length values are illegal.
| Initial Value | auto |
|---|---|
| Applies to | All elements except non-replaced inline elements, table rows, and row groups. |
| Inherited | No. |
| Animatable | Yes. The width of an element is animatable. |
| Version | CSS1 |
| DOM Syntax | Object.style.width = "300px"; |
Syntax
Syntax of CSS width Property
width: auto | length | percentage | initial | inherit | fit-content | min-content | max-content | stretch;Example of the width property specified in “%”:
Example of CSS width Property with % value
<!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>Result
In the given example, the width of the div container is 50%.
In the following example, the width of the first element is 250px and the one of the second element is 25em:
Example of the width property specified in “px” and “em”:
Example of CSS width Property with px and em values
<!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 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>
</body>
</html>Values
| Value | Description | Play it |
|---|---|---|
| auto | The browser will calculate a width for the specified element. This is the default value. | Play it » |
| length | Defines width in px, pt, cm, etc. | Play it » |
| percentage | Defines width in percent of the containing element. | Play it » |
| initial | Makes the property use its default value. | Play it » |
| inherit | Inherits the property from its parent element. | |
| fit-content | Calculates width based on the intrinsic size of the content. | Play it » |
| min-content | Calculates width based on the minimum content size. | Play it » |
| max-content | Calculates width based on the maximum content size. | Play it » |
| stretch | Stretches the element to fill the container. | Play it » |
Practice
What is the functionality of the 'width' property in CSS?