如何为单个子div添加内边距（padding）而不影响其他子div？

首先先修正你的JSX结构（原代码中两个子div未闭合，会导致DOM解析错误）：

<div className='parent'>
  <div className='child1'>
    {/* child1的内容 */}
  </div>
  <div className='child2'>
    {/* child2的内容 */}
  </div>
</div>

方法一：直接为child2添加独立padding #

这是最直接的方式，完全不会影响child1——因为padding是元素自身的内边距属性，仅作用于目标元素内部，和同级的child1没有关联。

对应的CSS样式：

/* 父元素基础样式（按需调整） */
.parent {
  width: 100%;
  /* 可选：给父元素加边框/背景，方便观察布局 */
  border: 1px solid #ccc;
}

/* child1的样式，无需padding */
.child1 {
  background-color: #f5f5f5;
  /* 明确清除默认padding（若浏览器有默认样式） */
  padding: 0;
}

/* 仅为child2设置padding */
.child2 {
  /* 按需设置上下左右的内边距值 */
  padding: 15px 20px;
  background-color: #e8e8e8;
  /* 可选：添加box-sizing避免padding撑开元素宽度 */
  box-sizing: border-box;
}

方法二：嵌套内层div实现内边距（替代方案） #

如果需要保持child2的外尺寸和child1完全一致，仅让内部内容有缩进，可以在child2内部再套一层div，把padding加在这个内层元素上：

调整后的JSX结构：

<div className='parent'>
  <div className='child1'>
    {/* child1内容 */}
  </div>
  <div className='child2'>
    <div className='child2-inner'>
      {/* child2的内容 */}
    </div>
  </div>
</div>

对应的CSS样式：

.child2-inner {
  padding: 15px 20px;
}

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