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>
可见，块级元素的盒模型相关属性正常
