块级元素和行内元素有哪些：分清用法直接用

块级元素和行内元素是HTML页面布局的两类核心元素，块级元素独占整行空间、可设置宽高边距，行内元素随文本并排显示、默认无法自定义宽高，日常开发中常用块级元素包含div、p、h1-h6、ul、ol、li等，常用行内元素包含span、a、em、strong、i等，同时存在img、input等行内块特殊元素，适配不同布局场景，该分类规则适配W3CHTML5标准布局规范，仅不适用于flex、grid弹性布局环境。

块级元素具体种类与特性

常见标准块级元素包含结构化布局和文本排版两大类，布局类有div、section、article、header、footer、nav，主要用于搭建页面整体结构，划分页面不同功能区域。文本排版类有p段落标签、h1至h6六级标题标签、ul无序列表、ol有序列表、li列表项、blockquote引用标签、pre预格式化文本标签，专门用于页面文字内容排版。

所有块级元素具备统一核心特性，你在使用时可直接快速判断元素属性。块级元素默认独占一行，后续元素会自动换行展示，不会与其他元素并排排列。同时支持设置width宽度、height高度、margin外边距、padding内边距、border边框所有盒模型属性，可自由调整元素尺寸和间距。

块级元素存在固定嵌套规则，p段落标签、h1-h6标题标签禁止嵌套其他块级元素，仅可放置文本和行内元素，强行嵌套会触发浏览器自动纠错，导致页面结构错乱。div、section等布局型块级元素可自由嵌套任意块级、行内元素，是布局最通用的容器。

行内元素具体种类与特性

常用行内元素以文本修饰和功能链接类为主，核心包含span通用行内容器、a超链接标签、em斜体强调标签、strong加粗强调标签、i图标/斜体标签、u下划线标签、del删除线标签、small小字文本标签。这类元素主要用于局部文本样式修改、页面跳转、文字修饰，不用于整体布局搭建。

行内元素的核心布局特征适配文本流规则，多个行内元素会在同一行从左到右依次排列，空间不足时自动换行。行内元素无法设置固定宽高，width和height属性设置无效，元素尺寸完全由内部文本内容自适应决定。

行内元素的边距属性存在明显限制，仅能设置水平方向的margin左右外边距、padding左右内边距，垂直方向的上下边距设置不会产生任何布局效果，这是开发中极易出错的细节。同时行内元素禁止嵌套块级元素，仅可嵌套自身同类行内元素和文本。

行内块元素种类与差异化对比

行内块元素是兼顾两类元素优势的特殊类型，不属于纯块级或行内元素，常用类型有img图片标签、input输入框标签、button按钮标签、select下拉框标签、textarea文本域标签。

为清晰区分三类元素的使用差异，可通过核心属性对比快速选型。

弹性布局会重置元素默认属性。

当父元素设置display:flex或display:grid时，子元素会脱离默认块级、行内元素规则，所有子元素均可并排排列且自由设置宽高，上述分类特性仅适用于默认标准文档流布局场景。