Reasons and solutions for the width attribute of the Span element to have no effect_javascript skills

Run the program first and take a look:
123

Output: 123

You can see that span will automatically change the width according to the content it contains

This is because: for inline elements (which can be inline by default such as span elements, or elements with display: inline)
width and height are only available under IE5.x and IE6 or newer versions of quirks hasLayout is triggered in mode. For IE6, if the browser is running in standards compatibility mode, inline elements will ignore the width or height attributes, so setting width or height cannot order the element to have layout in this case.
zoom can always trigger hasLayout, but it is not supported in IE5.0.

If an element with "layout" also displays: inline, its behavior is very similar to the inline-block mentioned in the standard: it is arranged horizontally and continuously in the paragraph like ordinary text. , affected by vertical-align, and the size can be adaptively adjusted according to the content. This can also explain why in IE/Win alone, inline elements can contain block-level elements with less problems, because in other browsers, display: inline means inline, unlike IE/Win, once the inline element has a layout, it still has a layout. Will become inline-block.



Solution:

Remove the W3C standards statement from the ASP.NET page (not recommended):
Remove:
123


Recommendation:

If display:block is set, the width attribute takes effect, but the span at this time is the same as the div.
If display:inline-block is set, the spans will be listed in the same row, and the width attribute will take effect. Common value descriptions for the display attribute of the

element:

block: The default value of the block object. Forces the object to be rendered as a block object, adding a new line after the object.
inline: Default value for inline objects. Forces the object to be rendered as an inline object, removing rows from the object. (Inline)

"CSS Definitive Guide" Chinese text display: Any visible element that is not a block-level element is an inline element. The characteristic of its performance is the form of "row layout".

The "row layout" here means that its form of expression is always displayed in rows.

For example, when we set an inline element border-bottom:1px solid #000;, it will be repeated in each line, and there will be a thin black line below each line.

If it is a block-level element, the black line displayed will only appear below the block.
inline-block: Renders the object as an inline object, but renders the object's contents as a block object. Adjacent inline objects will be rendered on the same line.
non: hidden object. Unlike the hidden value of the visibility property, it does not reserve its physical space for the hidden object.

The width and height cannot be set for inline (display:inline;) elements because inline belongs to line layout and its characteristic is to be laid out in one line, so the width and height cannot be set.
123

Output: 123


If you set float:left | right, the width attribute takes effect.

( Float) is an extraordinary layout feature that allows specified elements to break away from the ordinary document flow. And FLOAT must be applied to block-level elements, which means floating does not apply to inline tags. Or in other words when FLOAT is applied then this element will be designated as a block level element.
123

Output: 123