div和span有什么区别-创新互联

div和span有什么区别？这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容，让我们一起来看看吧！

 div和span的区别是：div标签是块级元素，每个div标签都会从新行开始显示，占据一行；div标签内可以添加其他的标签元素（行内元素、块级元素都行）。而，span标签是行内元素，会在一行显示；span标签内只能添加行内元素的标签或文本。

在html页面布局时，我们经常会使用到div标签和span标签，那么div标签和span标签之间有什么区别？本篇文章就给大家介绍div标签和span标签之间的区别，希望对你们有所帮助。【相关视频教程推荐：HTML教程】

div标签是块级元素，拥有块级元素的特点。每对div标签（

且div标签可以通过css样式来设置自身的宽度（也可省略，当没有使用css自定义宽度时，div标签的宽度为其的容器的100%）、高度，且还可以设置标签之间的距离（外边距和内边距）；

我们还可以在div标签中，使用其他标签（行内元素、块级元素都行），比如：span标签，p标签，也可以是div标签。

div标签的简单示例：设置这些div标签的容器的宽度为500px，高度为500px

内容1，使用div，不设置宽度，不设置边距
内容2，使用div，不设置宽度，设置内边距padding: 20px
内容3，使用div，不设置宽度，设置外边距margin: 20px
	
内容4，使用div，设置宽度，设置外边距margin: 20px
		
内容5，使用div，设置宽度，设置内边距padding: 20px
			
内容6，使用div，不设置宽度，不设置边距

效果图：

简单示例2：在div标签了，添加其他html标签

	span标签span标签a标签a标签
	
p标签
	
div标签

效果图：

span标签是行内元素，拥有行内元素的特点。span标签元素会和其他标签元素会在一行显示（块级元素除外），不会另起一行显示（如上例）。

span标签的宽度、高度都无法通过css样式设置，它的宽高受其本身内容（文字、图片）控制，随着内容的宽高改变而改变；span标签无法控制外边距和内边距，虽然可以设置左右的外边距和内边距，但上下的外边距和内边距无法设置。

且，span标签里只能容纳文本或者是其他的行内元素，不能容纳块级元素。

span标签的简单示例：

设置span.span1容器的内边距padding: 20px，span.span1容器内的span标签的外边距margin: 20px;

span标签span标签a标签a标签
div标签
span标签内，添加span标签a标签

效果图：

可以看出，虽然内边距padding把span.span1容器撑大了，但span标签的位置没有向下移动。

感谢各位的阅读！看完上述内容，你们对div和span有什么区别大概了解了吗？希望文章内容对大家有所帮助。如果想了解更多相关文章内容，欢迎关注创新互联行业资讯频道。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。