在html页面布局时,我们经常会使用到div标签和span标签,那么div标签和span标签之间有什么区别?下面本篇文章就来给大家介绍一下div标签和span标签之间的区别,希望对大家有所帮助。
HTML div标签
div标签是块级元素,拥有块级元素的特点。每对div标签(
且div标签可以通过css样式来设置自身的宽度(也可省略,当没有使用css自定义宽度时,div标签的宽度为其的容器的100%)、高度,且还可以设置标签之间的距离(外边距和内边距);
我们还可以在div标签中,使用其他标签(行内元素、块级元素都行),比如:span标签,p标签,也可以是div标签。
div标签的简单示例:设置这些div标签的容器的宽度为500px,高度为500px
效果图:
HTML span标签
span标签是行内元素,拥有行内元素的特点。span标签元素会和其他标签元素会在一行显示(块级元素除外),不会另起一行显示(如上例)。
span标签的宽度、高度都无法通过css样式设置,它的宽高受其本身内容(文字、图片)控制,随着内容的宽高改变而改变;span标签无法控制外边距和内边距,虽然可以设置左右的外边距和内边距,但上下的外边距和内边距无法设置。
且,span标签里只能容纳文本或者是其他的行内元素,不能容纳块级元素。
span标签的简单示例:
设置span.span1容器的内边距padding: 20px,span.span1容器内的span标签的外边距margin: 20px;span标签span标签a标签a标签
span标签内,添加span标签a标签
效果图:
可以看出,虽然内边距padding把span.span1容器撑大了,但span标签的位置没有向下移动。
HTML div标签和span标签的区别
div标签是块级元素,每个div标签都会从新行开始显示,占据一行;div标签内可以添加其他的标签元素(行内元素、块级元素都行)。
span标签是行内元素,多个span标签会在一行显示;span标签内只能添加行内元素的标签或文本。