如何让div元素内的嵌套子div向右缩进若干空格

下面是几种常用的可落地实现方式：

• 方案1：使用padding-left（最推荐）
  给父级div加自定义类名避免影响页面其他元素，再给直接子div设置左内边距：

<!-- HTML结构 -->
<div class="list-container">
    item
    <div>item 1</div>
    <div>item 2</div>
    <div>item 3</div>
</div>

/* CSS样式 */
.list-container > div {
  /* 3ch约等于3个半角空格的宽度，刚好匹配你要的效果，也可以替换为24px、2em等单位 */
  padding-left: 3ch;
}

该方案的优势是即使子div有背景色、边框等样式，也不会出现样式断裂的问题。

• 方案2：使用margin-left
  如果子div不需要展示左侧的背景、边框样式，用左外边距也能实现相同视觉效果：

.list-container > div {
  margin-left: 3ch;
}

• 方案3：手动加空格（仅临时小范围使用）
  不想写CSS的话可以直接在子div内容前加空格实体：

<div>
    item
    <div>&nbsp;&nbsp;&nbsp;item 1</div>
    <div>&nbsp;&nbsp;&nbsp;item 2</div>
    <div>&nbsp;&nbsp;&nbsp;item 3</div>
</div>

缺点是维护成本高，不适合大规模使用。

内容的提问来源于stack exchange，提问作者marlon