HTML中输入真正空格需用 等实体或white-space CSS；锚点偏移应通过scroll-margin-top修复，而非空格或margin/padding hack。
HTML里怎么输入真正的空格字符
网页中连续多个普通空格会被浏览器自动合并成一个，这是 HTML 的默认行为。如果需要显示多个空格、保留缩进或对齐，不能只敲空格键，得用 HTML 实体或 CSS 控制。
-
-
- 用
white-space: pre;或pre-wrap的 CSS 可让 `` 外的元素也保留所有空白符（包括换行和空格）
- 避免滥用
锚点跳转后页面顶部被遮挡、定位偏移怎么修
点击 #xxx 跳转后，目标元素顶部常被固定导航栏挡住，或者滚动位置“多滚了一截”。这不是空格问题，而是浏览器原生锚点滚动机制与 CSS 布局冲突导致的。
- 最稳妥解法：给锚点目标元素加
scroll-margin-top，比如scroll-margin-top: 60px;（值≈导航栏高度） - 旧浏览器不支持？改用 JS 监听
hashchange，然后element.scrollIntoView({ block: 'start', behavior: 'smooth' })并手动减去偏移 - 别用
margin-top: -60px; padding-top: 60px;这类 hack——会破坏文档流，影响其他样式和 SEO - 确保目标元素是“可滚动容器内”的真实 DOM 节点，不是
display: none;或visibility: hidden;状态
为什么加了 锚点还是偏？——常见混淆点
有人试图在锚点链接前加 或在目标元素上方塞空格来“调位置”，这完全无效。因为：
-
- 浏览器锚点滚动定位依据是元素的
getBoundingClientRect().top，和它前面有没有空格字符无关 - 如果目标是
标题
元素的上边界，空格加在它外面或里面都不改变该边界 - 真正要调的不是“空格”，是滚动容器的
scroll-padding-top或目标元素的scroll-margin-top
/* 推荐的 CSS 修复写法（现代浏览器） */
:target {
scroll-margin-top: 72px;
}
/* 或更通用：给所有带 id 的标题统一设置 */
h1[id], h2[id], h3[id] {
scroll-margin-top: 72px;
}
锚点偏移本质是滚动定位坐标系和视觉布局的错位，空格符号只是表象干扰项。重点盯住 scroll-margin-top 和容器的 scroll-padding，比折腾 HTML 实体靠谱得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
