width

p.test { width: 500px;}
p.test1 { width: auto;}

Value	Description
auto	Inherits the width of the containing block including the element's own padding and border. For img elements, the image is displayed at its original size, or the width is automatically calculated to maintain the aspect ratio based on the height. The initial value of the 'width' property is 'auto'.
number	Specifies the width as a numeric value. Common units are 'px' and '%'. Negative values are not allowed. When '%' is used, the reference size is the width of the containing block.

<div style="width: 500px; background-color: #ff0;">This is a div element. 'width: 500px' is specified.</div>

<div style="width: 500px; border: solid 1px #f00;">
	<div style="width: auto; background-color: #ff0;">This is a div element inside another div element. The parent div (red border) has 'width: 500px', and this element (yellow background) has 'width: auto'. This element inherits the parent's width, so its width is '500px'.</div>
</div>

※ Version data is based on MDN.

Specifies the width of an element.

Specifying the 'width' property on non-replaced inline-level elements has no effect. Non-replaced inline-level elements are elements whose 'display' property is 'inline', excluding replaced elements such as img, input, object, select, textarea, and button.

<p>
	<span style="width: 500px; background-color: #ff0;">This is a span element. Although 'width: 500px' is specified, it has no effect because span is a non-replaced inline-level element.</span>
</p>

<p><img style="width: 300px;" src="/dics/dictionary-css/img/sample.jpg"></p>

When the unit is specified as '%', it becomes a value relative to the containing block's size. In this case, the element's own border and padding are not included in the width calculation.

<div style="width: 500px; border: solid 1px #f00;">
	<div style="width: 100%; background-color: #ff0;">This is a div inside another div. The parent div (red border) has 'width: 500px', and this element (yellow background) has 'width: 100%'. Its width is relative to the parent element's width, so it becomes '500px'.</div>
</div>

<div style="width: 400px; border: solid 1px #f00;">
	<img style="width: 100%;" src="/dics/dictionary-css/img/sample.jpg">
</div>

<div style="width: 400px; border: solid 1px #f00;">
	<div style="width: 100%; padding: 0 50px; background-color: #ff0; opacity: 0.7;">This is a div inside another div. The parent (red border) has 'width: 400px', and this element (yellow background) has 'width: 100%' and 'padding: 0 50px'. Its width is relative to the parent but the padding is added on top, resulting in '500px' — which overflows the parent.</div>
</div>

When 'width' is set to 'auto' for elements other than inline elements and img elements, it inherits the containing block's width. This is similar to '100%', but with 'auto', the element's border and padding are included within the containing block's 100% width.

<div style="width: 500px; border: solid 1px #f00;">
	<div style="width: auto; padding: 0 50px; background-color: #ff0;">This is a div inside another div. The parent (red border) has 'width: 500px', and this element (yellow background) has 'width: auto' and 'padding: 0 50px'. Its width matches the parent element. Since padding is not added on top, the width remains '500px' — the same as the parent.</div>
</div>

When 'width' is set to 'auto' for an img element, the image is displayed at its original size. However, if the 'height' property is set to a value other than 'auto', the width is automatically calculated to maintain the aspect ratio based on the height.

<p><img style="width: auto;" src="/dics/dictionary-css/img/sample.jpg"></p>

<p><img style="width: auto; height: 150px;" src="/dics/dictionary-css/img/sample.jpg"></p>