行内元素和块级元素有哪些：识别对照表

行内元素和块级元素有哪些，是HTML布局基础判断要点，依据WHATWG维护的HTMLLivingStandard规范，浏览器默认display属性决定元素原生分类，块级元素默认独占一行、可设置宽高内外边距，行内元素默认和相邻元素排在同一行、宽高由内容撑开，你在写页面时可以通过原生默认样式快速区分，也可以通过CSS修改display属性改变元素显示类型，该转换不会改变元素本身的语义标签属性，适用场景包含前端静态页面开发、页面调试、标签语义校验，不适用SVG内部元素、iframe嵌套文档内独立渲染树这类隔离渲染场景。

行内元素和块级元素有哪些，原生标签清单

原生行内元素标签，核心特点是不会强制换行，常见标签包含a、span、img、input、label、em、strong、b、i、u、sub、sup、br、cite、code、abbr、q，这类元素横向排列，垂直方向的margin、padding部分浏览器表现存在差异，img和input属于替换型行内元素，属于特殊行内元素，支持直接设置宽高，和普通文本类行内元素存在区别。

原生块级元素标签，默认生成块级盒模型，自动占据父容器可用宽度，前后产生换行，常见标签包含div、p、h1到h6、ul、ol、li、dl、dt、dd、table、form、header、section、article、footer、nav、blockquote、pre，p标签内部不允许嵌套其他块级标签，属于语义层面的硬性限制，即便用CSS修改display，也不能突破该语义嵌套约束。

• 普通行内元素：span、a、em、strong、label、q、cite、code、abbr、sub、sup、u、b、i
• 替换型行内元素：img、input、select、textarea、button
• 原生块级元素：div、p、h1-h6、ul、ol、li、dl、dt、dd、blockquote、pre、header、section、article、footer、nav、form、table

行内元素和块级元素有哪些，核心差异对照

你可以使用display:inline-block把元素设置成行内块类型，它同时具备两类元素特征，横向同行排列，又支持自定义宽高、完整的margin和padding，导航按钮、标签切换组件经常使用这个类型。

CSS转换属于视觉渲染层面修改，不会改写HTML语义，比如把span设置成display:block，视觉上变成块级盒子，但它依旧是行内语义标签，搜索引擎和无障碍读屏识别时仍会识别span的语义，不能替代div、p这类原生块级语义标签。

该分类的适用边界是HTML标准文档流，一旦开启flex、grid布局，子元素的默认display特性会被布局上下文覆盖，原本的块级或者行内分类不再决定排列方式，很多初学者在这里出现误判，把flex子项依旧按照传统块级、行内规则计算换行，造成布局和预期不一致。

判断标签类别优先查看HTMLLivingStandard规范里每个标签对应的默认样式表，不要仅凭肉眼页面效果判定，部分标签会被浏览器内置user-agent样式修改表现，例如li默认是块级，但很多重置样式表会修改它的display，页面调试时需要区分是标签原生属性，还是外部CSS覆盖后的效果。

开发时优先保留原生语义分类，减少不必要的display改写，只有布局确实需要横向排列块级内容，或者需要让行内元素支持宽高时，再做display属性调整，这样可以降低后续维护时样式冲突的概率。