ul默认padding-inline-start: 40px是导航左侧空白的根源，需显式设为0并清margin；该值在LTR下等价padding-left，影响对齐且与子元素无关。
ul 默认 padding-inline-start 是罪魁祸首
浏览器给 ul 设了默认的 padding-inline-start: 40px（LTR 方向下等价于 padding-left），不是 margin，也不是你漏写了 reset。哪怕你把 li 设成 display: inline-block 或 flex，这个左侧空隙依然存在——它属于 ul 自身的盒模型，跟子元素无关。
常见错误现象：导航栏里 ul 和旁边 h1 明明都设了 margin: 0，但就是对不齐；开发者工具里看到 ul 左侧有明显空白，Computed 面板里定位到 padding-inline-start 值为 40px。
- 必须直接作用于
ul元素，而不是li或容器 - 用
padding-inline-start: 0比padding-left: 0更语义准确，兼容 RTL 场景 - 顺手加
margin: 0，因为多数浏览器也默认给ul加了margin-block
inline-block 的 li 会叠加出双重间隙
当把 li 改成 display: inline-block 实现横排导航时，问题升级：既有 ul 自身的 padding-inline-start，又有 li 之间的 HTML 换行产生的空白间隙（约 4px）。两者叠加，错位更明显。
使用场景：老项目未用 Flex/Grid，靠 inline-block 做水平菜单；或需要支持 IE11 的兼容性要求。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 先清
ul的padding-inline-start和margin - 再处理
li间间隙：父容器设font-size: 0，每个li单独设回font-size - 别只设
li { font-size: 0 }—— 这会让文字消失，且不解决父级空白
Flex 布局下 ul 的 padding 仍需手动清除
哪怕你把 ul 设成 display: flex，它的 padding-inline-start 还在。Flex 只改变子项排列方式，不重置自身默认样式。结果就是整个菜单整体右偏 40px。
性能/兼容性影响：现代项目首选 Flex，但 ul 的默认 padding 不会因 display 变化而自动归零，CSS 优先级规则决定了它必须显式覆盖。
-
ul { display: flex; padding-inline-start: 0; margin: 0; }是安全起点 - 如果
li用了flex: 1等分宽度，记得加flex-wrap: nowrap防换行 - 避免用
justify-content: space-between代替清除 padding —— 那只是视觉欺骗，DOM 结构仍不对齐
为什么 list-style-position: inside 不解决这个问题
list-style-position: inside 只控制项目符号（bullet）画在内容框内还是外，不影响 ul 自身的 padding-inline-start。很多人试了没用，就以为方案失效，其实是改错了地方。
容易踩的坑：在调试时盯着 li 的 padding 或 margin 狂查，却忽略 ul 的 computed padding；或者用 text-indent 负值硬拉，破坏可访问性和 RTL 支持。
- 打开浏览器开发者工具，选中
ul，切到Computed标签页，搜padding—— 第一个出现的padding-inline-start就是根源 - 不要依赖全局 reset.css 里的
ul { padding: 0 }，有些 reset 只写padding: 0，不覆盖padding-inline-start的逻辑优先级 - 若项目用 CSS-in-JS 或 Shadow DOM，注意样式作用域，可能需加
:host或!important（仅限兜底）
