偶尔有朋友问我，“span标签怎么用？它与标签div的区别？”。百度百科中的定义是：span标签是被用来组合文档中的行内元素。span没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。

其实没那么复杂，span在html中常用的布局标签，与div标签区别在于，span随内容大小而占用不同的宽度，而div标签则是占有一行。也就是div是大容器，它里面可以放小容器span。

span标签的作用，它可以把一行内容划分为几个部分，从而给每个部分实现不同的特效。

举个例子

<div style = "color:red">

<span style = "color:blue">

景安</span>互联网数据中心

</div>  

常见用法

1.span标签设置字体颜色

<p><span style="color:red;">景安</span><span style="color:blue;">互联网数据中心</span></p>

2.span标签设置宽度与高度

<p><span style = "width:200px;height:30px; border:1px solid #000;">互联网数据中心</span>

3.span标签中的内容靠右

<span style = "float:right;padding-right:10px;">互联网数据中心</span>  

4.span标签居中

<span style = "width:500px; height:30px; line-height:20px; text-align:center; display:block;">互联网数据中心</span>

span标签是默认是行内元素，如果给你加了float或dispaly:block属性就能让它转为块级元素。

扩展阅读

(1)span标签支持的全局属性有class、hidden、id、style、title等；

(2)span标签支持的事件属性有onerror、onload、onfocus、ononline、onpagehide等。