块级元素和行内元素

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>
复制代码

可见，块级元素的盒模型相关属性正常