Generally, the width attribute is set for the style marked by span, and no effect is found. However, sometimes we need to set the width attribute of a span because of an application. In this case, we need to use the display attribute.
The display attribute has four attribute values: block, inline, inline-block, and none. Their detailed descriptions are as follows:
Block: the default value of the block object. The object is forcibly presented as a block object, and a new row is added after the object.
Inline: the default value of the inline object. Forces the object to be submitted as an inline object and deletes rows from the object.
Inline-block: submits an object as an inline object, but the content of the object is presented as a block object. The Inline object next to it will be presented in the same row.
None: hides an object. Unlike the hidden value of the visibility attribute, it does not reserve its physical space for hidden objects.
If the display: block and width attribute is set to take effect, the span is the same as that of div.
If you set display: inline-block, the span is in the same row, and the width attribute takes effect.