浏览器为 和 等元素内置了默认外边距（margin），导致“Specs”与“black metal”之间及上下出现意外空白；只需通过 CSS 重置 margin-top 和 margin-bottom 即可精准控制间距。

浏览器为 `

` 和 `

` 等语义化元素内置了默认外边距（margin），导致“specs”与“black metal”之间及上下出现意外空白；只需通过 css 重置 `margin-top` 和 `margin-bottom` 即可精准控制间距。

在标准 HTML 渲染中，<h3></h3> 默认带有底部外边距（如 Chrome 中约为 21px），而 <ul></ul> 默认带有顶部外边距（通常为 1.33em 或约 24px）。这两个默认值叠加，就会在 <h3></h3> 和 <ul></ul> 之间产生显著的“双倍空白”，这正是你观察到“large space”的根本原因——并非代码缺失空格或换行所致，也与 span 内容无关。

要彻底解决该问题，推荐使用以下轻量级、语义清晰的 CSS 重置：

h3 {
  margin-bottom: 0; /* 消除标题下方冗余空白 */
}

ul {
  margin-top: 0;    /* 消除列表上方默认间距 */
  margin-bottom: 0; /* 可选：同时移除列表底部间距，保持一致性 */
}

⚠️ 注意事项：


html-deploy
使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。
下载
• 避免仅依赖内联样式或 !important：优先在 <style></style> 标签或外部 CSS 文件中统一管理，提升可维护性；
• 考虑全局重置 vs 局部重置：若项目中多处存在类似问题，建议采用更系统的 CSS reset（如 * { margin: 0; padding: 0; }），但需谨慎评估对其他元素的影响；
• 语义与结构优化建议：<main></main> 在此处非必需（无导航/主内容语义），可简化为 <div> 或直接保留 <code><ul></ul>；若“Specs”是列表标题，也可改用 <h3>Specs</h3> <ul>…</ul> 结构，更符合无障碍与 SEO 规范。

  最终修复后的 HTML + CSS 示例：

  立即学习“前端免费学习笔记（深入）”；

  <style>
    h3 { margin-bottom: 0; }
    ul { margin-top: 0; margin-bottom: 0; }
  </style>
  
  <span style="font-size:12px">This is Vudu's newest product...</span>
  <h3><strong>Specs</strong></h3>
  <ul>
    <li>black metal</li>
    <li>aircraft grade material</li>
  </ul>

  这样即可实现紧凑、可控的垂直排版，且兼容所有现代浏览器。