<span>标签的CSS宽度

我<span>在模块标题中使用标签，例如

<span>Categories</span>.

我用CSS指定跨度的背景颜色/图像，宽度和高度。

但是跨度的宽度取决于其内容/文本。

因此，如果我这样做<span></span>，而在CSS中只有背景图像/颜色，则什么也不会出现。

当然，我希望出现一些东西。

我该如何解决？

您可以将display属性显式设置为“ block”，使其表现得像一个块级元素，但是在这种情况下，您应该只使用div即可。

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

跨度默认为内联样式，您不能指定其宽度。

display: inline-block;

这将是一个好方法，除非IE不支持

但是，您可以破解多种浏览器解决方案

您不能使用内联显示指定元素的宽度。您可以在其中放置一些内容，例如不间断的空格（），然后设置填充使其具有更多的宽度，但您无法直接控制它。

您可以使用display inline-block，但是不被广泛支持。

真正的技巧是将图像放入内部，然后设置其宽度。有点像透明的1像素GIF。但是，不建议使用此方法。

我会使用该padding属性。这将允许您在元素的两侧添加一定数量的像素，而不会失去其跨度质量：

• 不会成为障碍
• 它将如您所愿地漂浮

但是，此方法只会添加到填充中，因此，如果您更改内容的长度（例如，从“类别”更改为“标签”），则内容的大小将更改，并且元素的整体大小也将更改。但是，如果您确实要设置一个固定大小，则应按上述方法操作并使用div。

有关盒子模型，内容，填充，边距等的更多详细信息，请参见盒子模型。

像其他答案一样，使用以下命令启动span属性：

display:inline-block;  

现在您可以使用padding而不是width：

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

当使用填充时，您的颜色会扩展到两侧（左右），而不仅仅是右侧（就像在宽度中一样）。

在示例中使用属性“ display”：

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

固定高度和宽度后，您将告诉我如何处理其中的文本溢出其区域的行为。所以添加css

溢出：自动；