div与span之<div>与<span>的区别是什么？
div css布局html中常常使用<div>和<span>标签，默认这个标签感觉没有什么区别，加了后字体、文字大小、字体颜色等样式都没有区别（可以说两者没有被加入默认渲染样式）。那div和span究竟什么区别呢？在实际html布局中怎么选择span和div？
一、<div>与<span>相同处：
1、两者都是HTML标签
<div>内容</div>
<span>内容</span>
2、div与span内均可以使用class
<div class="names">内容</div>
<span class="names">内容</span>
3、div与span内均可以使用id
<div id="names">内容</div>
<span id="names">内容</span>
4、span与div内均可以使用style属性直接写CSS代码
<span style="font-size:20px">内容</span>
<div style="color:#000">内容</div>
5、span和div标签均可嵌入标签
二、<span>与<div>区别
1、拼写单词不同
<span>标签，有四个字母（s p a n）组成
<div>标签，有三个字母（d i v）组成
2、<div>和<span>默认块样式区别
div默认具有块（独占一行）属性display:block，默认宽度100%
span默认不具有块（独占一行）属性，所以span默认内容多少自适应占用多少宽度高度。
div与span默认块样式区别实例截图
3、div标签和span标签布局时选择不同
由于网页中布局网页时，有时布局框架，有时布局小局部，而div css常用是div标签，div自然作为主要布局标签，主要用于大布局框架，小布局框架时主要选择标签。而span作为小局部小样式地方选择。一般选择不使用span作为框架标签布局。
看看下面框架与小地方属性设置标签应用：
<div id="header">
<div class="nav">导航内容</div>
</div>
<div class="exp">
我是内容<span class="names">我有不同字体效果</span>
</div>
span与div区别选择示例
div和span区别使用示例截图
从上图，虽然div的应用没有设置CSS样式，只展示了html内容div标签使用，而span我们展示了小修饰时候选择span应用。通过以上实例代码要告诉大家都是，一般结构布局我们采用div标签，小小局部或小修饰地方我们采用span标签。
三、让div与span没有区别
这点作为延续思考问题，默认情况下div具有块，span不具有块功能，那么我们也可以让div和span具有相同块功能（独占一行），我们只需对span设置个display:block即可。
span{ display:block}
html内容代码：
<div>我在div内</div>
<div>我在div内</div>
<span>测试文字我在span内</span>
<span>测试文字我在span内</span>
div与span思维研究效果截图
span和div实现一样默认块属性示例截图
四、<span>和<div>的区别与使用总结
通过以上HTML8为大家介绍span与div相同，看出span与div都作为HTML标签，其大部分属性没什么区别，区别只有一个属性不同即块（display:block）有无。通俗理解，span默认紧贴内容随内容多少而自适应宽度高度，而div默认独占一行，默认情况下每个div盒子独占一行。
通常布局框架我们采用div比较多标签作为主要标签使用，而span作为小局部或小修饰地方使用。平时大家在实际做项目时候注意div与span选择，认识div与span区别。根据经验灵活选择span与div使用。
关于div与span相关教程扩展阅读：
1、div什么作用
2、div盒子
3、div换行显示
4、div隐藏 CSS隐藏DIV方法
5、div内容居中
6、html span作用
7、css span应用 span标签css设置
8、多个div盒子并排同行显示
9、div并排不换行显示 DIV并排显示