First of all, span is an inline element, and secondly, span is a non-replacement element, so the width and height cannot be set. After you float, make span a block-level element, so you can set the width and height. Although img, input, textarea, and select are inline, they are replacement elements. If the width and height are not set, then the default width and height are set, and the width and height can be set.

float will become an element block, that is to say, the display of a floating element is block

Span is an inline element by default

I feel like your description is unclear.
With the line-height:30px; attribute, the line height is always 30px regardless of whether it is floated or not.
If it is height:30px; the height attribute does not work without the float attribute, and the row height cannot be set for inline elements. With the addition of float, the element will become a block-level element, and the height will be effective.

The inline element has no border. For example, two spans will be mixed into one line. Use the height from outside to inside to determine the height of the content. It can be understood that the inline element has no border and shrinks to the content boundary. If float is added, the rules are not explicitly specified. It will inherit inline-block by default; due to the block method of flat, it is used to determine the boundary from the inside out and then take the height;

It’s very simple, span is an inline element, and the width and height cannot be set for this element. But there are two ways to indirectly change its display: float and position.

I can’t tell what the problem is just by looking at your CSS.
You write and add line-height: 30px !important; try