div和span的区别有哪些

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

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

HTML div标签

div标签是块级元素，具有块级元素的特色。每对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标签

结果图：

HTML span标签

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的区别有哪些的细致内容，更多请关注 百分百源码网 其它相干文章！