如何为父div设置padding且不作用于最后一个子元素？

核心思路 #

不用逐个给子元素加margin，利用CSS伪类选择器定位最后一个子元素，直接抵消父元素的padding，或者只给非最后子元素应用类似padding的效果，完全适配动态增减的子元素数量。

方法一：父元素设padding + 最后子元素负margin抵消 #

这是最直接的方案，父元素正常设置左、右、上padding，然后给最后一个子元素设置对应方向的负margin，抵消父padding的影响：

/* 父容器样式 */
.parent {
  padding: 16px 16px 0; /* 上16px、左右16px，下padding设为0 */
  background-color: #ffffff;
}

/* 最后一个子元素抵消父padding */
.parent > div:last-child {
  margin-left: -16px;
  margin-right: -16px;
  margin-top: -16px; /* 若不需要抵消上padding可删除此行 */
}

注意：如果最后子元素有背景色，会完全覆盖父容器的padding区域，刚好达到“padding不作用于最后子元素”的效果；如果子元素无背景，视觉上会直接和父容器边缘对齐。

方法二：仅给非最后子元素添加padding #

如果不想用负margin，可以反过来操作：父元素不设padding，只给除最后一个之外的所有子元素设置左、右、上padding，变相实现需求：

.parent {
  background-color: #ffffff;
}

/* 给非最后子元素添加padding */
.parent > div:not(:last-child) {
  padding: 16px 16px 0;
}

这个方案更适合子元素自身有独立背景的场景，视觉上和父容器加padding的效果一致，但最后子元素不受任何padding约束。

方法三：利用Flex布局的间距控制（可选） #

如果子元素是纵向排列，也可以用Flex布局结合margin实现类似效果：

.parent {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
}

/* 给非最后子元素添加上、左右margin */
.parent > div:not(:last-child) {
  margin: 16px 16px 0;
}

这种方式不需要父元素的padding，通过子元素的margin控制间距，最后子元素自然和父容器边缘对齐。

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