HTML 块级元素和行内元素的一些总结。
列表
行内元素:
- b, big, i, small
- abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
- a, bdo, br, img, map, object, q, script, span, sub, sup
- button, input, label, select, textarea
块级元素:
- div,p,h1,h2,h3,h4,h5,h6
- address,article, aside, section,audio,video
- canvas, dd,dl,fieldset,figcaption, figure,
- header, footer,hgroup, hr,noscript,ol,ul, table,form
- blockquote,output,pre
除了行内元素和块级元素外,还有一些特殊的类型比如list-item、inline-block、table、flex等,具体可查看css属性display的取值。
区别
- 内容
- 一般情况下,行内元素只能包含数据和其他行内元素
- 而块级元素可以包含行内元素和其他块级元素
- 格式
- 行内元素不会以新行开始且默认以内容填充撑起宽度
- 而块级元素会新起并占满一行,不论内容多少
- 盒模型
- 理论上,行内元素不可设置宽高、内边距、外边距、边框,强行设置会有意向不到的结果
- 块级元素具有盒模型的正常属性,宽高、内外边距都可设置
对于标签嵌套规则,不能仅依据块级元素可以包含行内元素和其他块级元素,行内元素只能包含数据和其他行内元素。因为在HTML5 中有了新的概念,具体可查看MDN关于内容类别的介绍 Content categories。
盒模型
- 内联元素设置内外边距、宽高及边框属性
<div class="wrap">
<span>
这是一个行内元素,宽(100px)、高(100px)、margin(100px)、padding(100px)、border(10px)
</span>
</div>
复制代码
可见,行内元素的width
和height
设置无效,margin
、padding
、border
设置出现异常
- 块级元素设置内外边距、宽高及边框属性
<div class="wrap">
<p>这是一个块级元素,宽(100px)、高(100px)、margin(100px)、padding(100px)、border(10px)</p>
</div>
复制代码
可见,块级元素的盒模型相关属性正常