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

浏览器为 `

` 和 `

` 等元素内置了默认外边距（margin），导致“Specs”与“black metal”之间出现意外大空隙；只需通过 CSS 重置 `margin-top` 和 `margin-bottom` 即可精准控制垂直间距。

在标准 HTML 渲染中，<h3></h3> 默认带有底部外边距（margin-bottom），而 <ul></ul> 默认带有顶部外边距（margin-top）。这两个默认值叠加后，会在“Specs”标题与下方列表项之间产生显著空白——这并非代码错误或平台（如 Vudu 或 W3Schools）特有行为，而是所有现代浏览器遵循的用户代理样式表（User Agent Stylesheet）所致。

要彻底解决该问题，推荐在 CSS 中显式重置相关属性：

h3 {
  margin-bottom: 0;
}

ul {
  margin-top: 0;
}

将上述 CSS 加入 <style></style> 标签或外部样式表后，HTML 结构保持不变即可生效：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

<span style="font-size:12px">This is Vudu's newest product...</span>
<h3><strong>Specs</strong></h3>
<main><ul>
<li>black metal</li>
    <li>aircraft grade material</li>
  </ul></main>

✅ 注意事项：

• 避免仅依赖内联样式（如 style="margin:0"）覆盖，应优先使用类选择器或元素选择器统一管理；
• 若项目需全局重置，默认推荐使用 CSS Reset 或 * { margin: 0; padding: 0; }（慎用，影响布局语义）；
• 浏览器开发者工具（F12 → Elements → Computed）可直观查看当前元素的 margin 计算值，快速定位来源；
• <main></main> 元素本身无默认 margin，但其子元素（如 <ul></ul>）的 margin 会外溢（margin collapsing），因此直接控制 <ul></ul> 更有效。

掌握浏览器默认样式机制，是前端排版精准控制的关键一步。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！