html中插入真正空格应优先用 实体或css控制，避免堆砌空格；菜单缩进须用嵌套ul+padding实现语义化与响应式，禁用 模拟层级。
HTML里怎么插入真正的空格字符
网页中连续的普通空格会被浏览器自动合并成一个，所以直接敲空格键没用。要显示多个可测量、不被压缩的空白，得用 HTML 实体或 CSS 控制。
-
-
- 避免用多个
侧边栏菜单用空格做层级缩进的常见错误
很多人用 模拟子菜单缩进，结果在不同字体或 Zoom 下错位，或者屏幕阅读器无法识别层级关系。
- 正确做法是用嵌套
<ul></ul>+ CSSpadding-left，既语义清晰又响应友好 - 如果必须用空格（比如纯文本菜单或 SSR 渲染限制），优先用
- 别在
<a></a>标签内开头连写 3 个
CSS替代方案比HTML空格更可靠
侧边栏菜单的排布本质是视觉层级 + 可访问性，空格只是表象，CSS 才是解法核心。
- 用
text-indent控制首行缩进，适用于标题类菜单项 - 用
padding-inline-start（或旧写法padding-left）控制整个菜单项的左偏移，支持 rem/em 单位，缩放自适应 - 对带图标的菜单项，推荐用
display: flex+gap，图标和文字间距由 CSS 管理，不依赖空格占位
<nav class="sidebar-menu">
<ul>
<li><a href="#home">首页</a></li>
<li class="has-submenu">
<a href="#product">产品</a>
<ul class="submenu">
<li><a href="#web"> Web 版</a></li>
<li><a href="#mobile"> App 版</a></li>
</ul>
</li>
</ul>
</nav>
真正难的不是打几个空格，而是判断这个空格该由 HTML 承担语义，还是交给 CSS 控制表现。菜单缩进一旦混用 和 padding，后续改字体、换主题时就会出现像素级错位，还很难定位原因。
立即学习“前端免费学习笔记（深入）”；
