html5规范中默认为行内元素的是phrasing content类元素，如a、span、strong、em、img、input、label、button、code、br、abbr、b、cite、dfn、i、kbd、mark、q、samp、small、sub、sup、time、u、var等，其中img和input虽表现似inline-block，但语义属行内。
span、a、strong、em、img、input、label、button、code、br 是最常遇到的行内元素，但实际标准列表比这宽得多，且不同 HTML 版本和浏览器对“行内性”的解释有细微差别。
哪些元素默认是行内元素？看规范，不是看渲染效果
判断一个元素是否为行内元素，不能只看它在页面上有没有换行——比如 img 和 input 默认表现为 inline-block，视觉上可设宽高，但语义和初始显示类型仍属行内类别。W3C HTML5 规范明确定义了“phrasing content”（短语内容），它基本对应传统意义上的行内元素集合。常见成员包括：a、abbr、area（仅在 map 中）、b、br、button、cite、code、data、dfn、em、i、img、input、kbd、label、mark、q、samp、small、span、strong、sub、sup、time、u、var 等。
注意：br 和 hr 容易混淆——br 是行内元素，hr 是块级元素（同时也是空元素）。
为什么有些“行内元素”能设宽高、上下 margin？
因为它们的默认 display 值不是 inline，而是 inline-block 或 inline-table。例如：
-
img和input默认是inline-block，所以margin-top、height都有效 -
a、span、strong默认是纯inline，margin-top/bottom无效，height也无效（但line-height可影响行高） -
button行为因浏览器而异，现代浏览器大多按inline-block处理
别依赖“看起来像行内就当它是”，用开发者工具检查 computed style 中的 display 值才是准的。
常见误用：把块级元素塞进纯行内上下文
HTML5 严格限制 phrasing content 的子元素类型。以下写法会触发验证警告或被浏览器静默修正：
- 在
a标签里直接放div：@#@#@#@#@#@#@#@#@#@0 - 在
span里写p或ul - 用
strong包裹整个段落（应改用section+ CSS 控制）
合法替代方案：
- 需要包裹多行内容又想保持语义？用
div+role="link"或重构为button+ JS - 要强调一段结构化内容？优先用
section、article配合aria-labelledby - 只是样式需求？用
span+ 类名，而非硬塞块级标签
空元素里哪些同时是行内元素？
空元素（void elements）不关心“块/行内”分类，但它们在布局中表现出的默认行为必须区分：
-
br：行内元素，作用就是换行，无尺寸，不可设宽高 -
img：空元素 + 行内元素（表现上是inline-block） -
input：空元素 + 行内元素（同上） -
hr：空元素 + 块级元素（注意：不是行内） -
meta、link、base：空元素，但只在head中有效，不出现在文档流中，不参与布局
真正容易踩坑的是 img 和 input：它们既是空元素，又是行内元素，还默认带 inline-block 行为——三重身份叠加，导致对齐、垂直居中、margin 处理方式和纯 span 完全不同。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
