CSS width Property

.example1 {
  width: auto;
}

.example2 {
  width: 50px;
}

.example3 {
  width: 50%;
}

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Meaning

The width property sets the width of an element’s content region (excluding padding, border, and margin).

Note: The min-width and max-width properties override the width property.

Note: By default, it sets the width of the content area, but if box-sizing is set to border-box, it sets the width of the border area.

Default value:	auto
Inherited:	No
Animatable:	Yes
Version:	CSS1
JavaScript syntax:	`object.style.width="auto\|length\|percentage\|initial\|inherit\|revert\|revert-layer\|unset";`

width: auto|length|percentage|initial|inherit|revert|revert-layer|unset;

The numbers in the table specify the first browser version that fully supports the property.

The following table describes the values of this property.

Value	Description
auto	This is default value. The browser will calculate the width for the specified element on the basis of the values of other properties.
length	Specifies the width as a length value in px, pt, cm, em, etc. Negative length values are not allowed.
percentage	Specifies the width in percentage. The percentage is calculated with respect to the width of the element's containing block. Negative percentage values are not allowed.
max-content	The intrinsic preferred width.
min-content	The intrinsic minimum width.
fit-content(length\|percentage)	Uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, )).
initial	Sets this property to its default value.
inherit	If specified, the associated element takes the computed value of its parent element animation-delay property.
revert	Reverts the cascaded value of the property from its current value to the value the property
revert-layer	Rollback styles to the ones specified in previous cascade layers.
unset	Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.

selectors {
  width: auto;
}