Cause and solution of ineffective width attribute of Span Element

Run the program and check the following code:
<Span style = 'background-color: #336699; width: 300px; '> 123 </span>

Output: 123

We can see that span automatically changes the width based on the contained content.

This is because: For inline elements (it can be an inline element by default, such as a span element or a display: inline element)
Width and height are only triggered in IE5.x and IE6 or the quirks mode of the updated version. For IE6, if the browser runs in standard compatibility mode, the inline element ignores the width or height attribute. Therefore, setting width or height cannot enable layout for this element.
Zoom can always trigger hasLayout, but it is not supported in IE5.0.

If an element with "layout" is also displayed: inline, its behavior is similar to the inline-block mentioned in the standard: the section is arranged horizontally and consecutively in the same way as the common text, influenced by vertical-align, And the size can be adjusted according to the content. This can also explain why inline elements in IE/Win can contain block-level elements, because display: inline is inline in other browsers, unlike IE/Win, once an inline element has layout, it will become inline-block.



Solution:

<1> remove the W3C standard declaration on the ASP. NET page (not recommended ):
Remove: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Span style = 'background-color: #336699; width: 300px; '> 123 </span>


<2> recommendation:

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.

Common Values of the element display attribute are described 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)

The text in the CSS authoritative guide shows that any visible element that is not a block-level element is an inline element. Its performance is in the form of "Row layout,

The "Row layout" here means that its representation is always displayed in rows.

For example, when we set an inline element border-bottom: 1px solid #000, it is represented by repeating each line, and there will be a black fine line under each line.

If it is a block-level element, the displayed black line will only appear below the block.
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.
Non: hides objects. Unlike the hidden value of the visibility attribute, it does not reserve its physical space for hidden objects.

Inline (display: inline;) elements cannot be set in width or height. Because inline is a row layout, it is characterized by layout in a row, so it cannot be set in width or height.
<Span style = 'background-color: #336699; width: 300px; display: inline-block; '> 123 </span>

Output: 123


<3> If the float: left | right and width attributes are set to take effect.

(Floating) exclusive layout characteristics produced by discontinuing the specified element from the normal document stream. In addition, FLOAT must be applied to block-level elements, that is, FLOAT is not applied to inline labels. Or in other words, when FLOAT is applied, this element will be specified as a block-level element.
<Span style = 'background-color: #336699; width: 300px; float: left; '> 123 </span>

Output: 123