如何实现CSS嵌套缩进，打造简洁评论区布局实战案例？

本文共计1027个文字，预计阅读时间需要5分钟。

使用`padding-left可以让整个评论块（包括头像、边框、背景）一起缩进，视觉上统一；而`margin-left`只推内容区，容易导致头像错位、边框断裂或hover区域不连续。

常见错误是给每层子评论加固定 margin-left: 20px，结果三级评论缩进 60px，四级 80px——层级一多就挤出容器，尤其在移动端。

• 推荐用 CSS 自定义属性控制缩进基准：--indent-step: 16px，再通过 padding-left: calc(var(--indent-step) * var(--depth)) 动态计算（需配合 HTML 的 data-depth 属性）
• 若用 BEM，可写成 .comment--level-2、.comment--level-3 等类名，避免深度依赖 DOM 层级
• 注意：不要用 text-indent，它只缩进第一行，对多行评论完全无效

如何避免子评论的 border-left 在缩进后断开？

border-left 断开的本质是父容器没包住子评论的缩进区域——它的 border-left 默认从父容器左内边距起始，而子评论的 padding-left 把内容往右推了，视觉上就像“断了”。