The <span.> tag is an inline element, so the height and width cannot be set; if you need to change its width and height, you need to turn it into a block or inline-block:
span {display:inline-block;}
Example demonstration: The following two styles are given, class1 sets the width and height of the span, class2 changes the span to an inline block element, and then adds class1 style to one of the spans, and the other adds class1 and class2 style, observe the effect
Create Html element
<span class="class1">示例文字</span>
<span class="class1 class2">示例文字</span>
Set css style
.class1{width:200px;height:30px;line-height:30px;padding:10px;margin:20px;border:1px solid green;}
.class2{display:inline-block;}
Observation effect:
Because the first span is an inline element by default, the width and height settings do not work; the second span has been changed to inline-block mode, so the width and height can be set
