我有一個組件可以讓卡片堆疊在一起。下面的片段是一排卡片的簡化版本。

卡片必須總是一樣寬，卡片之間需要有16px的間隙，這可以通過在左邊和右邊填充8px來實現。每張牌的右邊。

然而，我不希望在卡片的外部左右兩邊有任何空隙(它們應該緊靠視窗)。然而，以這種方式移除填充，則允許其他卡的大小增加。我如何移除第一張卡片上的左填充，最后一張卡片上的右填充，同時確保所有卡片保持相同的寬度？

body {
  margin: 0;
}

.wrapper {
  display: flex;
}

.card-container {
  padding-left: 8px;
  padding-right: 8px;
  flex: 0 0 auto;
  width: 25%;
}

.card-container .card-content {
  height: 150px;
  width: 100%;
  background-color: lightblue;
}

<div class="wrapper">
  <div class="card-container">
    <div class="card-content"></div>
  </div>
  <div class="card-container">
    <div class="card-content"></div>
  </div>
  <div class="card-container">
    <div class="card-content"></div>
  </div>
  <div class="card-container">
    <div class="card-content"></div>
  </div>
</div>

你得到的問題是你同時應用了寬度:25%和填充到卡片容器，但是顏色應用到了卡片內容。從父對象(包含卡片的er)移除一側的填充可以讓它的子對象成長。更好的方法是在容器中添加一個邊距(雖然可能會縮小元素)來代替填充，或者甚至使用grid/flex-box的gap屬性來實現你的目標。 CSS差距

您應該刪除& quotflex: 0 0自動；"從班上& quot。卡片容器& quot不顯示滾動條。并加上& quot左填充:0；"用類& quot。卡片容器& quot刪除第一張卡片上的左填充并添加& quot右填充:0；"使用類& quot。卡片容器& quot去掉最后一張卡上的填充符。

body {
  margin: 0;
}

.wrapper {
  display: flex;
}

.card-container {
  padding-left: 8px;
  padding-right: 8px;
  width: 25%;
}

.card-container:first-child {
  padding-left: 0;
}

.card-container:last-child {
  padding-right: 0;
}

.card-container .card-content {
  height: 150px;
  width: 100%;
  background-color: lightblue;
}

<div class="wrapper">
  <div class="card-container">
    <div class="card-content"></div>
  </div>
  <div class="card-container">
    <div class="card-content"></div>
  </div>
  <div class="card-container">
    <div class="card-content"></div>
  </div>
  <div class="card-container">
    <div class="card-content"></div>
  </div>
</div>