Removing padding on elements allows others to grow bigger than required

Question

I have a component that allows cards to stack on top of one another. This snippet below is a simplified version of a top row of cards.

The cards must ALWAYS be the same width, and there needs to be 16px gap between the cards, this has been made possible by padding of 8px on both the left & right of each card.

However, I do not want any gap on the outer left and right of the cards (they should sit tight against the viewport). Removing padding however in this way then allows the other cards to grow in size. How can I remove the padding-left on the first card, the padding-right on the last card whilst ensuring all cards remain the same width?

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>

You should be using [`gap`](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) instead of padding in the first place here. — CBroe, May 26 '23 at 11:01
Adding gap then means that the cards ignore the width 25% property and align 3 per row instead of 4. — cts, May 26 '23 at 11:28
Not sure what you are referring to? https://jsfiddle.net/Luh1jmgn/ — CBroe, May 26 '23 at 12:06
I omitted the `flex-wrap: wrap` property which is needed on the wrapper, but with `gap`, causes only 3 per row: https://jsfiddle.net/st1ky7fj/ — cts, May 26 '23 at 12:59
Sure, but that is easily fixable here using `width: calc(25% - 6px);` (Four items per row means three gaps between them, 3 times 8 is 24, 24 through 4 gives 6.) — CBroe, May 26 '23 at 13:05
you are overcomplicating a simple task: https://jsfiddle.net/3f9za14y/ — Temani Afif, May 26 '23 at 14:17

score 0 · Answer 1 · answered May 26 '23 at 10:57

The problem you got is you applied both, the width: 25% and the padding to the card-container but the color to the card-content. Removing the padding on one side from the parent (card-container) lets it's child grow. Better add a margin (tho that maybe might resolve in shrinking elements) instead of the padding to the container or even use the gap property of grid/flex-box to achieve your goal. CSS GAP

Mohamed Yedes · Answer 2 · 2023-05-26T11:38:00.730

You should remove the "flex: 0 0 auto;" from the class ".card-container" to not show the scrollbar. And add "padding-left: 0;" to the first element with class ".card-container" to remove the padding-left on the first card and add "padding-right: 0;" to the last element with class ".card-container" to remove the padding-right on the last card.

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>

Removing padding on elements allows others to grow bigger than required

2 Answers2