如何为滑块（slider）中的卡片（card）设置间距（margin）？

我正在尝试创建一个slider，但其中的card之间完全没有间距。我曾尝试为它们添加margin，但并未生效。请帮我排查问题所在，提前感谢！

为什么margin不生效？ #

你的.card元素设置了position: absolute，这类元素脱离了正常文档流，彼此布局互不影响——margin只会改变单个卡片自身的位置，无法让其他卡片为它留出空间。再加上你用transform: translateX()控制卡片滑动偏移，这种情况下margin完全起不到间距作用。

正确的实现方式 #

直接在滑动偏移的计算逻辑中加入间距值，不需要依赖margin。比如希望每张卡片之间有20%宽度的间距，只需要修改JS中translateX的计算公式，把原来的100 * (index - currCard)调整为(100 + 20) * (index - currCard)（也可以用固定值比如calc(100% + 2rem)，根据需求选择）。

修改后的完整代码 #

JavaScript

const cards = document.querySelectorAll(".card");
const btnLeft = document.querySelector(".slider__btn--left");
const btnRight = document.querySelector(".slider__btn--right");
let currentCard = 0;
const lastCard = cards.length;
// 自定义卡片偏移比例：100%宽度 + 20%间距
const cardOffset = 120;

const goToCard = function(currCard) {
  cards.forEach(
    (card, index) =>
    (card.style.transform = `translateX(${cardOffset * (index - currCard)}%)`)
  );
};
goToCard(0);

const nextCard = function() {
  if (currentCard === lastCard - 1) currentCard = 0;
  else currentCard++;
  goToCard(currentCard);
};

const previousCard = function() {
  if (currentCard === 0) currentCard = lastCard - 1;
  else currentCard--;
  goToCard(currentCard);
};

btnLeft.addEventListener("click", previousCard);
btnRight.addEventListener("click", nextCard);

CSS

.slider {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* 添加内边距避免卡片滑出视口 */
  padding: 0 4rem;
  overflow: hidden;
}

.card {
  position: absolute;
  top: 6rem;
  height: 10rem;
  width: 10rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #634133;
  transition: all 1s;
  /* 可选：添加阴影增强层次感 */
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
}

.slider__btn {
  font-size: 3.25rem;
  color: #fff;
  background-color: #634133;
  font-family: sans-serif;
  border: none;
  border-radius: 100%;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 50%;
  z-index: 10;
  height: 5.5rem;
  width: 5.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* 修复原代码transition语法错误 */
  transition: all 0.2s ease;
}

.slider__btn--left {
  left: 2rem;
  /* 修正垂直居中逻辑 */
  transform: translateY(-50%);
}

.slider__btn--right {
  right: 2rem;
  /* 修正垂直居中逻辑 */
  transform: translateY(-50%);
}

.slider__btn:hover {
  background-color: rgba(216, 123, 91, 0.85);
}

.photo__photo {
  height: 23rem;
}

.photo__photo--1 {
  background-color: yellow;
}

.photo__photo--2 {
  background-color: red;
}

.photo__photo--3 {
  background-color: purple;
}

.photo__photo--4 {
  background-color: green;
}

.photo__photo--5 {
  background-color: blue;
}

HTML

<div class="slider">
  <div class="card">
    <div class="photo photo__photo--1">&nbsp;</div>
  </div>

  <div class="card">
    <div class="photo photo__photo--2">&nbsp;</div>
  </div>

  <div class="card">
    <div class="photo photo__photo--3">&nbsp;</div>
  </div>

  <div class="card">
    <div class="photo photo__photo--4">&nbsp;</div>
  </div>

  <div class="card">
    <div class="photo photo__photo--5">&nbsp;</div>
  </div>

  <button class="slider__btn slider__btn--left">&larr;</button>
  <button class="slider__btn slider__btn--right">&rarr;</button>
</div>

额外优化点 #

1. 修复了原CSS中transition: all 0.2 ease的语法错误，补充了时间单位s
2. 修正了按钮的垂直居中写法，原偏移逻辑不符合居中需求
3. 给.slider添加overflow: hidden和左右内边距，避免卡片滑出视口时显示混乱

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