浏览器为 和 等元素内置了默认外边距（margin），导致“Specs”与“black metal”之间及上下出现意外空白；只需通过 CSS 重置 margin-top 和 margin-bottom 即可精准控制间距。
浏览器为 `
` 和 `` 等元素内置了默认外边距（margin），导致“specs”与“black metal”之间及上下出现意外空白；只需通过 css 重置 `margin-top` 和 `margin-bottom` 即可精准控制间距。在标准 HTML 渲染中，标题（如 <h1></h1>–<h6></h6>）和列表（<ul></ul>、<ol></ol>）均带有浏览器预设的外边距（margin）。例如，Chrome、Firefox 和 Safari 默认为 <h3></h3> 设置约 21px 的下边距（margin-bottom），为 <ul></ul> 设置约 1em（通常为 16px）的上边距（margin-top）。这两者叠加，便造成“Specs”与下方列表项之间出现明显空隙——这并非代码错误，而是 CSS 用户代理样式表（User Agent Stylesheet）的正常行为。
要彻底解决该问题，推荐使用以下轻量级 CSS 重置：
h3 {
margin-bottom: 0;
}
ul {
margin-top: 0;
margin-bottom: 0; /* 可选：同时清除底部空白，避免后续元素受影响 */
}
在标准 HTML 渲染中，标题（如 <h1></h1>–<h6></h6>）和列表（<ul></ul>、<ol></ol>）均带有浏览器预设的外边距（margin）。例如，Chrome、Firefox 和 Safari 默认为 <h3></h3> 设置约 21px 的下边距（margin-bottom），为 <ul></ul> 设置约 1em（通常为 16px）的上边距（margin-top）。这两者叠加，便造成“Specs”与下方列表项之间出现明显空隙——这并非代码错误，而是 CSS 用户代理样式表（User Agent Stylesheet）的正常行为。
要彻底解决该问题，推荐使用以下轻量级 CSS 重置：
将上述 CSS 添加至 <style></style> 标签或外部样式表中，即可立即生效。完整修正后的 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"）覆盖，应优先使用外部或<style></style>块中的选择器，以保证可维护性； - 若项目需全局统一重置，建议采用更系统的 CSS Reset（如
* { margin: 0; padding: 0; }）或现代方案如normalize.css； -
main元素本身无默认 margin，但其子元素（如ul）的默认样式才是根源，切勿误调main的样式； - 在 W3Schools 编辑器等在线环境中，确保 CSS 已正确加载且未被其他规则覆盖（可通过浏览器开发者工具 → Elements 面板检查计算后的 margin 值）。
通过针对性重置关键元素的外边距，即可实现紧凑、可控的排版效果，无需依赖像素硬编码或冗余 wrapper 容器。
