Ancho CSS de una etiqueta <span>

Utilizo <span>etiquetas en los títulos de mis módulos, por ejemplo

<span>Categories</span>.

Especifico el color / imagen de fondo del tramo, el ancho y el alto en css.

Pero el ancho del tramo depende de su contenido / texto.

Entonces, si lo hago <span></span>, con solo una imagen / color de fondo en css, no aparece nada.

Por supuesto, quiero que aparezca algo.

¿Cómo puedo resolver esto?

Podría establecer explícitamente la propiedad de visualización en "bloquear" para que se comporte como un elemento de nivel de bloque, pero en ese caso probablemente debería usar un div en su lugar.

<span style="display:block; background-color:red; width:100px;"></span>

se extiende de forma predeterminada al estilo en línea, cuyo ancho no se puede especificar.

display: inline-block;

sería una buena manera, excepto que IE no lo admite

Sin embargo, puede piratear una solución de varios navegadores.

No puede especificar el ancho de un elemento con visualización en línea. Puede poner algo en él como un espacio que no se rompa () y luego configurar el relleno para darle más ancho, pero no puede controlarlo directamente.

Puede usar display inline-block, pero eso no es ampliamente compatible.

Un verdadero truco sería poner una imagen dentro y luego establecer el ancho de eso. Algo así como un GIF transparente de 1 píxel. Sin embargo, no es el enfoque recomendado.

Usaría el paddingatributo. Esto le permitirá agregar un número determinado de píxeles a cada lado del elemento sin que el elemento pierda sus cualidades de extensión:

• No se convertirá en un bloque
• Flotará como esperas

Sin embargo, este método solo se agregará al relleno, por lo que si cambia la longitud del contenido (de Categorías a Etiquetas, por ejemplo), el tamaño del contenido cambiará y el tamaño general del elemento también cambiará. Pero si realmente desea establecer un tamaño rígido, debe hacer lo mencionado anteriormente y usar un div.

Consulte el modelo de caja para obtener más detalles sobre el modelo de caja, contenido, relleno, margen, etc.

Como en otras respuestas, comience sus atributos de intervalo con esto:

display:inline-block;  

Ahora puede usar el relleno más que el ancho:

padding-left:6%;
padding-right:6%;

Cuando usa relleno, su color se expande a ambos lados (derecho e izquierdo), no solo a la derecha (como en ancho).

Utilice el atributo 'pantalla' como en el ejemplo:

<span style="background: gray; width: 100px; display:block;">hello</span>
<span style="background: gray; width: 200px; display:block;">world</span>

Habiendo fijado la altura y el ancho, debe indicar cómo actuar si el texto de su interior desborda su área. Así que agrega el CSS

desbordamiento: automático;