Question 175860 in Html Question posted in
Some basic documentation can be found here.

Can padding be removed from HTML elements to allow them to grow larger than needed?

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>
Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search