Setting Width to auto
It is used to set the width property to its default value. If the width property is set to auto then the browser calculates the width of the element.
Syntax
width: auto;
Example: This example demonstrates the use of the width property whose value is set to auto.
<!DOCTYPE html>
<html>
<head>
<title> CSS width Property </title>
<style>
.gfg {
width: auto;
color: white;
font-size: 20px;
background-color: rgb(0, 150, 0);
}
h2 {
font-size: 20px;
color: black;
}
</style>
</head>
<body>
<h2>
CSS width Property
</h2>
<p class="gfg">
This is an example of auto width property
</p>
</body>
</html>
Output:
CSS width Property
The width property in CSS is used to set the width of elements such as text and images. It can be specified in various units, including pixels (px), percentages (%), and centimeters (cm). This property defines the width of the content area, excluding padding, borders, and margins.
The width property can be overridden by the min-width and max-width properties. When the box-sizing property is set to border-box, the width includes padding and borders.
Syntax
width: auto | value | initial | inherit;
Note: The width property for the element does not involve the padding, border & margin.
Default Value
Its default value is auto.
Property Values
| Value | Description |
|---|---|
auto | Default value; the browser calculates the width of the element automatically. |
value | Sets the width using units like pixels (px), percentages (%), or centimeters (cm). Cannot be negative. |
initial | Sets the width property to its default value. |
inherit | Inherits the width property from its parent element. |
All the properties are described well with the example below.