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