CSS设置列表缩进：padding-inline-start实用技巧

用 padding-inline-start 替代 padding-left 的关键原因

padding-inline-start 响应书写方向（direction 和 writing-mode），在 RTL（如阿拉伯语）页面中自动变成右缩进，而 padding-left 会固定在物理左侧，导致布局错位。

• 只在现代浏览器中支持（Chrome 87+、Firefox 63+、Safari 14.1+），IE 完全不支持
• 若需兼容旧版 Safari 或 IE，得用 @supports 回退到 padding-left
• 对
  或
  设置更稳妥，直接设在
  1. 上可能被 margin 抵消

  padding-inline-start 和 text-indent 的行为差异

  text-indent 只缩进第一行，且对列表项无效（除非显式设 display: block 并清除默认 list 样式）；padding-inline-start 是盒模型内边距，整个

• 内容区域都会向右（或内联起始侧）偏移。
  • 用 text-indent 处理段落首行缩进，别用它调列表缩进
  • 如果列表项含多行文本，padding-inline-start 能保证每行都对齐
  • 注意：padding-inline-start 会扩大元素总宽度，可能触发换行或溢出，必要时配合 box-sizing: border-box

  实际写法与常见翻车点

  推荐直接作用于列表容器，避免逐个设置

• ：

  ul, ol {
    padding-inline-start: 2rem;
  }

  • 不要写成 li { padding-inline-start: 2rem; } —— 默认
  • 是 display: list-item，padding 不会撑开内容区，效果不可靠
  • 如果用了自定义 marker（list-style: none + ::marker），padding-inline-start 仍有效，但需确认 marker 是否脱离文档流
  • 某些 CSS 重置库（如 normalize.css）会把 ul/ol 的默认 padding-inline-start 设为 0，务必检查 computed styles

  缩进量不是越大越好，2rem 是较安全的起点；超过 3rem 容易在小屏上挤占内容空间，且和项目符号间距失衡——这点常被忽略。

  今天关于《CSS设置列表缩进：padding-inline-start实用技巧》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！