CSS中如何把Span标签设置为固定宽度

由于span是行内元素，所以如果想要给它设置固定的宽度，需要先将其转换为块状元素，之后就可以为其设置固定的宽度了，如span {display:blockwidth: xxx px}。

请记住，任何的行内元素，都是不能对其进行宽高设置，它的高度只随着字体大小和行高而改变，而它的宽度只随着文本内容的宽度而改变，所以要设置行内元素的宽高值，将其转换为块状元素是最基本的方法。

至于什么是块状元素，什么是行内元素，它们之间有什么关系，可以直接百度，快速 了解一下。以上是个人的一些学习积累，又不对的地方，请见谅。

<span>标签属于行内元素（inline），所以无法设置高度和宽度；如果需要改变其宽高，就需要将其转变为块体元素（block）或行内块体元素（inle-block）：

span{display:inlie-block}

实例演示：下面给出了两种样式，class1设置span 的宽高，class2改变span为行内块体元素，然后给其中一个span添加class1样式，另一个同时添加class1和class2样式，观察效果

创建Html元素

<span class="class1">示例文字</span><br>

<span class="class1 class2">示例文字</span>

设置css样式

.class1{width:200pxheight:30pxline-height:30pxpadding:10pxmargin:20pxborder:1px solid green}

.class2{display:inline-block}

观察效果：

第一个span因为默认为行内元素，所以宽度和高度的设置不起作用；第二个span已经改为inline-block方式，所以可以设置宽度和高度

其实这个问题很简单——先要认清span的属性，因为span属于内联元素，而内联元素是忽略宽度和高度的，明白了这一点解决就很简单了，解决的办法就是利用css将span变为盒装元素即可。

将内联元素定义为盒装元素的方法有两种：

1.直接使用显示属性display将其定义为盒装元素；

display:block

2.使用浮动属性float将其自动定义为盒装元素；

---