span不能直接设置width和height，因为它是默认display: inline的行内元素，浏览器会忽略对其宽高及上下外边距的设置；需改为display: inline-block或block才能生效。
span 为什么不能直接设 width 和 height
因为 span 默认是行内元素（display: inline），浏览器渲染时会忽略对它的 width、height、margin-top、margin-bottom 等块级属性的设置。这不是 bug，而是规范行为。
常见错误现象：<span style="width: 100px; height: 20px; background: red;">text</span> 渲染后宽高完全无效，背景色只包住文字本身。
- 想保留行内流但需要尺寸控制？改用
display: inline-block - 需要上下外边距？同样加
inline-block或改用display: inline-flex - 纯文本修饰且不干预布局？就保持默认
inline，别硬塞尺寸
什么时候必须用 span 而不是 div
当你要精准作用于「一段连续文本中的某几个字」时，span 是唯一合法选择。其他标签要么破坏流（如 div 强制换行），要么带语义干扰（如 strong 暗示强调，em 暗示重音）。
常见错误现象：在 <p></p> 里塞 <div> 导致 DOM 被浏览器自动修正，结构错乱；用 <code><p></p> 包单个词，结果段落间距炸开。
- ✅ 正确：
<p>报错信息是 <span class="error">404</span>，不是 500</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a> <p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> - ✅ 正确：
@#@#@#@#@#@#@#@#@#@0 - ❌ 错误：
<p>版本号 </p> <div class="version">v2.3.1</div>（div不允许嵌套在p中）
span 和 div 的 display 行为能互换吗
可以，但不建议仅靠 display 属性强行扭转语义初衷。CSS 能让 span 变成块级，也能让 div 变成行内，但 HTML 结构和可访问性不会随之改变。
性能与兼容性影响：现代浏览器对 display 切换支持良好，但某些旧版屏幕阅读器仍依赖原生元素类型判断内容层级；过度使用 display: block 在 span 上，可能让 JS 选择器逻辑变脆弱（比如依赖 document.querySelectorAll("span") 做样式批量处理，结果意外捕获了本该是容器的“伪块级 span”）。
- 若需块级行为 + 无语义容器 → 用
div，别改span - 若需行内行为 + 无语义包裹 → 用
span，别改div - 真有混合需求？考虑语义更清晰的替代：如
<time></time>、<mark></mark>、或自定义role="none"
span 嵌套块级元素会发生什么
HTML 解析器会直接拒绝——这不是警告，是强制修复。你写的 <span><div>xxx</div></span> 在 DOM 中会被浏览器重排为 <span></span><div>xxx</div>
<span></span>，原始结构彻底丢失。
这个行为在所有主流浏览器中一致，且无法通过 CSS 或 JS 规避。它源于 HTML 规范对元素嵌套的硬性限制：span 的 content model 明确只允许 phrasing content（短语级内容），排除所有块级元素。
- ✅ 允许嵌套：
<span><strong>bold</strong><em>italic</em></span> - ❌ 禁止嵌套：
<span><p>para</p></span>、<span><div>box</div></span> - ⚠️ 隐患操作：用 JS 动态插入块级 HTML 到
span.innerHTML，结果同上，DOM 自动拆解
display: block、塞 margin、甚至包裹整段 div，就说明该换标签了。
