一个<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不支持它
但是，您可以使用多浏览器解决scheme
你不能用inline指定元素的宽度。 你可以把东西放进去，就像一个非破坏性的空间（），然后设置填充来给它更多的宽度，但是你不能直接控制它。
你可以使用display inline-block，但是这并没有得到广泛的支持。
一个真正的黑客将是把一个图像内，然后设置的宽度。 像一个透明的1像素的GIF。 不是推荐的方法。
使用属性“display”，如下例所示：
<span style="background: gray; width: 100px; display:block;">hello</span> <span style="background: gray; width: 200px; display:block;">world</span>
我会使用padding属性。 这将允许您在元素的任一侧添加一组像素，而不会丢失其跨度品质：
- 它不会成为一个块
- 它会浮动，如你所料
然而，这个方法只会添加到填充中，所以如果你改变内容的长度（例如从Categories到Tags），内容的大小将会改变，并且元素的整体大小也会改变。 但是，如果你真的想设置一个刚性的大小，你应该如上所述，使用div。
有关框模型，内容，填充，边距等的更多详细信息，请参阅框模型 。
就像其他答案一样，用这个开始你的跨度属性：
display:inline-block;
现在你可以使用宽度以上的填充 ：
padding-left:6%; padding-right:6%;
当你使用填充时，你的颜色会扩展到两侧 （右侧和左侧），而不仅仅是右侧（如widht）。
确定了高度和宽度后，你可以告诉如果它里面的文字溢出了它的面积。 所以添加在CSS中
溢出：自动;
